XHTML / CSS Padding для встроенного элемента с переносом строки

Question

У меня есть встроенный элемент с разрывом строки.Он имеет прокладку со всех сторон.Тем не менее, бокового отступа на том месте, где разрыв строки обрезает элемент, нет.

Это то, что я имею в виду:

http://jsfiddle.net/4Gs2E/

Должен быть отступ на 20 пикселейсправа от тега и слева от с , но это не так.Единственный способ увидеть эту работу - это создать новый элемент для каждой строки, но этот контент будет генерироваться динамически и не будет находиться в контейнере фиксированной ширины, поэтому я не вижу такой работы.Есть ли другой способ сделать это в css без javascript?

Я хочу, чтобы конечный результат выглядел так: http://jsfiddle.net/GNsw3/

, но без каких-либо дополнительных элементов

Мне также нужно, чтобы это работало только с отображением inline, так как я хочу, чтобы фон обернул вокруг текста, так как встроенный блок этого не делает

Возможно ли это?

edit, изменил примеры, чтобы сделатьчто я хочу более видимым:

текущий http://jsfiddle.net/4Gs2E/2/

как я хочу, чтобы это выглядело http://jsfiddle.net/GNsw3/1/

Answer 1

В некоторых случаях вы можете использовать box-shadow для обхода.

Переместите правый и левый padding элемента к его родительскому элементу и добавьте два box-shadow s.

Результат: http://jsfiddle.net/FpLCt/1/

Поддержка браузера для box-shadow: http://caniuse.com/css-boxshadow

Обновление:

Также существует новое свойство css для этой проблемы, которое называется box-decoration-break.В настоящее время он поддерживается только в Opera, но, надеюсь, больше браузеров реализуют это в ближайшее время.

Надеюсь, это поможет

Answer 2

Нашел решение для вас, но оно не очень красивое:)

Поскольку вы не можете нацелиться на элемент <br> с помощью css, вы должны использовать javascript.Вот как вы можете выполнить то, что вы хотите, с помощью jQuery:

// Add two spaces before and after any <br /> tag<br> $('br').replaceWith('&nbsp;&nbsp;<br />&nbsp;&nbsp;');

Поиграйте с количеством элементов  , чтобы получить заполнение с обоих концов.обновленное демо Fiddle: http://jsfiddle.net/4Gs2E/8/

Answer 3

Я просто хотел сделать css-анимированное меню для себя.Обходное решение, которое я нашел, заключается в том, чтобы обернуть ваш элемент INLINE-BLOCK (при необходимости измените css, давайте назовем его span с таким атрибутом для целей данного решения) в элемент block .Затем я использую поля span , так как оно было заполнено для окружающих div .

div.menuopt {
    margin: 10px;
    padding: 0px;
    padding-left: 0px;
    overflow: hidden;
    width: 500px;
    height: 150px;
    background: grey;
}
span.menuopt {
    display: inline-block;
    margin: 0px;
    padding: 0px;
    margin-left: 150px;
    margin-top: 10px;
    font-size: 25px;
}

Пример: http://jsfiddle.net/ApbQS/

hopeэто поможет любому

Answer 4

Обычно это реализуется путем переноса каждого слова в собственный SPAN с рамкой.

Answer 5

Может быть, вы можете использовать float: left вместо display: inline:

http://jsfiddle.net/GolezTrol/4Gs2E/1/