Проблема у меня есть, я хочу поставить что-то вроде этого
<span>CONSEQUAT, VEL ILLUM DOLORE EU FEUGIAT NULLA FACILISIS AT VERO EROS ET ACCUMSAN ET IUSTO ODIO DIGNISSIM QUI BLANDIT PRAESENT LUPTATUM ZZRIL DELENIT AUGUE DUIS DOLORE TE FEUGAIT NULLA FACILISI.</span>
с CSS как это
span {
font-size: 25px;
line-height: 28px;
color: white;
background-color: #2EC6C6;
padding-right: 5px;
padding-left: 5px;
}
в div в процентах. Когда линия ломается, я хочу, чтобы каждая строка имела прикладную прокладку влево и вправо. В настоящий момент он применяется только в начале и в конце всего предложения.
Я знаю, что могу поместить каждую строку в отдельный диапазон, но я хочу, чтобы она была динамичной, поэтому я мог написать много строк, и это применимо.
Любые предложения? Предпочитал бы чистый CSS, но хотел бы перейти на javascript.
Вот Fiddle
Из здесь:
дисплей: встроенный блок
Встроенный блок помещается в строку (т.е. в той же строке, что и соседний контент), но он ведет себя как блок.
span {
font-size: 25px;
line-height: 28px;
color: white;
background-color: #2EC6C6;
padding-right: 5px;
padding-left: 5px;
display: inline-block
}
Вы можете попробовать использовать box-decoration-break: clone для webkit/firefox и white-space: pre-wrap для ie
header {
position: relative;
margin: 10px;
width: 300px;
}
header:before {
content: '';
position: absolute;
height: 100%;
right: 100%;
width: 12px;
background: gray;
background: rgba(0,0,0,.3);
}
h1 {
display: inline;
padding: 8px 12px 8px 0;
font-size: 30px;
line-height: 49px;
background: rgba(0,0,0,.3);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
/* add browser-class to html with modernizr or js */
.ie h1 {
white-space: pre-wrap;
}
.ff h1 {
padding: 7px 12px 7px 0;
}
<header>
<h1>Lorem ipsum dolor, sit amet consectetuer</h1>
</header>
попробуйте это
напишите display:inline-block;
в span
классе
span {
font-size: 25px;
line-height: 28px;
color: white;
background-color: #2EC6C6;
padding-right: 5px;
padding-left: 5px;
display:inline-block; /*-add--*/
}
Ну, это работает, если вы делаете это с <div>
вместо <span>
, см. здесь.
inline-block-span
над div
? По общему признанию это спасет Вас, редактируя Ваш текст HTML. Но будут ли они «плавать» или вести себя по-другому на странице?
width
они будут более или менее вести себя одинаково, но с width
-property span
действительно будет плавать в пределах строки текста.