#xhtml #inline #css
#xhtml #встроенный #css
Вопрос:
У меня есть встроенный элемент с разрывом строки в нем. Он имеет заполнение со всех сторон. Однако боковое заполнение там, где разрыв строки обрезает элемент, отсутствует.
Это то, что я имею в виду:
Справа от тега и слева от with должно быть заполнение размером 20 пикселей, но его нет. Единственный другой способ, которым я могу увидеть, как это работает, — это создать новый элемент для каждой строки, но этот контент будет динамически генерироваться и не будет находиться в контейнере фиксированной ширины, поэтому я не вижу, чтобы это сработало. Есть ли какой-либо другой способ сделать это в css без какого-либо javascript?
Я хочу, чтобы конечный результат выглядел так: http://jsfiddle.net/GNsw3 /
но без каких-либо дополнительных элементов
мне также нужно, чтобы это работало только с отображением встроенного, поскольку я хочу, чтобы фон обтекал текст, поскольку встроенный блок этого не делает
Возможно ли это?
редактировать, изменил примеры, чтобы сделать то, что я хочу, более заметным:
текущий http://jsfiddle.net/4Gs2E/2 /
как я хочу, чтобы это выглядело http://jsfiddle.net/GNsw3/1 /
Комментарии:
1. Ваш «Конечный результат» выглядит для меня одинаково (Chrome).
2. проверьте мое редактирование, должно сделать его более понятным
Ответ №1:
В некоторых случаях вы можете использовать box-shadow для обходного пути.
Переместите правую и левую padding части элемента к его родительскому элементу и добавьте две box-shadow буквы s.
Результат: http://jsfiddle.net/FpLCt/1 /
Поддержка браузером для box-shadow : http://caniuse.com/css-boxshadow
Обновить:
Для этой проблемы также есть новое свойство css box-decoration-break . В настоящее время он поддерживается только opera, но, надеюсь, скоро это будет реализовано в других браузерах.
Надеюсь, это поможет
Ответ №2:
Нашел решение для вас, но оно не очень 🙂
Поскольку вы не можете настроить таргетинг на <br> элемент с помощью css, вы должны использовать javascript. Вот как вы можете добиться желаемого с помощью jQuery:
// Add two spaces before and after any <br /> tag
$('br').replaceWith('amp;nbsp;amp;nbsp;<br />amp;nbsp;amp;nbsp;');
Играйте с количеством amp;nbsp; элементов, чтобы получить заполнение с обоих концов.
Вот обновленная демонстрация скрипки: http://jsfiddle.net/4Gs2E/8 /
Ответ №3:
Может быть, вы можете использовать float: left вместо display: inline :
Комментарии:
1. да, плавающий левый элемент в любом случае устанавливает элемент в встроенный блок в этом примере, где текст длиннее: jsfiddle.net/xXhbL/1 фон должен обтекать только текст, а не блок
2. Теперь я вижу. Боюсь, тогда это невозможно без добавления дополнительных элементов. Но это не должно быть так сложно. На самом деле, единственное, что вам нужно, это заменить
<br>на</h1><h1>. Стилизацию можно выполнить в отдельной таблице стилей, что в любом случае было бы хорошей идеей.
Ответ №4:
Обычно это реализуется путем обертывания каждого слова в собственное SPAN , имеющее границу.
Ответ №5:
Я просто хотел сделать css-анимированное меню для себя. Я нашел обходной путь, чтобы обернуть ваш элемент ВСТРОЕННОГО БЛОКА (при необходимости измените css, давайте назовем его 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 /
надеюсь, это кому-нибудь поможет