применить отступ до конца строки html css

0

Проблема у меня есть, я хочу поставить что-то вроде этого

<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

  • 1
    Соответствующий: stackoverflow.com/questions/7215011
  • 1
    Я думаю, что параграф будет более подходящим для вашего случая.
Показать ещё 3 комментария
Теги:

4 ответа

2
Лучший ответ

Из здесь:

дисплей: встроенный блок

Встроенный блок помещается в строку (т.е. в той же строке, что и соседний контент), но он ведет себя как блок.

span {
    font-size: 25px;
    line-height: 28px;
    color: white;
    background-color: #2EC6C6;
    padding-right: 5px;
    padding-left: 5px;
    display: inline-block
}

http://jsfiddle.net/DsqY2/

Изображение 174551источник

Поделиться
  • 0
    Я ищу, чтобы выделение было только на 5 пикселей длиннее каждой строки, но чтобы весь блок был таким цветом.
  • 1
    Хотя это технически отвечает на этот вопрос, этот ответ можно улучшить, добавив объяснение того, почему изменение работает.
Показать ещё 1 комментарий
3

Вы можете попробовать использовать 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>
Поделиться
0

попробуйте это

напишите display:inline-block; в span классе

http://jsfiddle.net/DsqY2/3/

 span {
    font-size: 25px;
    line-height: 28px;
    color: white;
    background-color: #2EC6C6;
    padding-right: 5px;
    padding-left: 5px;
    display:inline-block; /*-add--*/
}
Поделиться
-2

Ну, это работает, если вы делаете это с <div> вместо <span>, см. здесь.

Поделиться
  • 0
    Хорошо, я принимаю downvote, но это наводит меня на следующий вопрос: каковы преимущества использования inline-block-span над div ? По общему признанию это спасет Вас, редактируя Ваш текст HTML. Но будут ли они «плавать» или вести себя по-другому на странице?
  • 0
    Только что решил для себя: если нет свойства width они будут более или менее вести себя одинаково, но с width -property span действительно будет плавать в пределах строки текста.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню