Блог

Альтернативное название: Пожалуйста, помогите мне понять модель визуального форматирования CSS.

Я читаю черновик редактора W3C для CSS2.

Из раздела 9.2.2., с моим акцентом,

Элементы встроенного уровня — это те элементы исходного документа, которые не образуют новые блоки содержимого; содержимое распределяется по строкам […]. Следующие значения свойства display делают элемент встроенным: встроенный, встроенный-таблица и встроенный-блок.

Элементы встроенного уровня генерируют поля встроенного уровня, которые являются полями, участвующими в контексте встроенного форматирования.

Таким образом, следующие элементы span должны генерировать поля встроенного уровня.

 <span>Hello.</span><span>Hallo.</span><span>Hello.</span><span>Hallo.</span><span>Hello.</span>
 

Но на всякий случай мы можем сделать это явным.

 span {
  display: inline;
}
 

Затем, из раздела 9.4.2,

Когда несколько блоков встроенного уровня не могут поместиться по горизонтали в одном линейном блоке, они распределяются между двумя или более линейными блоками, расположенными вертикально. Таким образом, абзац представляет собой вертикальный стек линейных блоков.

Но если вы измените размер документа, содержащего интервалы, они не будут переноситься, то есть не будут распределены между двумя или более линейными блоками. Изменение их свойства отображения на inline-block устраняет проблему, даже несмотря на то, что элементы встроенного блока генерируют поля встроенного уровня.

Из раздела 9.2.2.,

Блоки встроенного уровня, которые не являются встроенными блоками (например, замененные элементы встроенного уровня, элементы встроенного блока и элементы встроенной таблицы), называются атомарными блоками встроенного уровня, поскольку они участвуют в своем контексте встроенного форматирования как единый непрозрачный блок.

Добавление пробелов между пролетами также устраняет проблему, но я не уверен, почему. Формулировка normal стоимости white-space имущества не очень конкретна.

Последовательности пробелов сворачиваются. Символы новой строки в исходном коде обрабатываются так же, как и другие пробелы. Линии прерываются по мере необходимости для заполнения полей строк.

Когда необходимо заполнить поле строки?

В дополнение к другим ответам, здесь есть различие между блоками встроенного уровня (как используется в цитате OP CSS 2) и содержимым встроенного уровня в соответствии с цитатой Temani CSS Text 3.

Когда несколько блоков встроенного уровня не могут поместиться по горизонтали в одном линейном блоке, они распределяются между двумя или более вертикально расположенными линейными блоками. Таким образом, абзац представляет собой вертикальный стек линейных блоков.

Чего это не объясняет, так это того, как распределяются коробки. В частности, в нем не описывается концепция фрагментации. То есть неатомные встроенные блоки могут быть разделены на две или более частей, и эти фрагменты помещены в разные строки.

Вам нужно учитывать разрыв строки, чтобы понять, что происходит

Когда содержимое встроенного уровня раскладывается по строкам, оно разбивается по блокам строк. Такой разрыв называется разрывом строки. Когда строка прерывается из-за явных элементов управления разрывом строки (таких как сохраненный символ новой строки) или из-за начала или конца блока, это принудительный разрыв строки. Когда строка прерывается из-за переноса содержимого (т. Е. Когда UA создает невынужденные разрывы строк, чтобы уместить содержимое в пределах меры), это разрыв мягкого переноса. Процесс разбиения содержимого встроенного уровня на строки называется разрывом строки.

ясно, что у вас нет никакого «принудительного разрыва строки», а также «мягкого разрыва переноса».

Перенос выполняется только в разрешенной точке разрыва, называемой возможностью мягкого переноса. Когда обертывание включено (см. white-space ), UA должен минимизировать объем содержимого, переполняющего строку, путем обертывания строки с возможностью мягкого обертывания, если таковая существует.

white-space используется только для того, чтобы разрешить или запретить обертывание, но не для принудительного обертывания. Для этого вам нужно рассмотреть другие свойства:

Хотя CSS не полностью определяет, где возникают возможности мягкого переноса, некоторые элементы управления предоставляются для различения распространенных вариантов:

• Свойство разрыва строки …
• Свойство разрыва слов…
• Свойство дефисов …
• Перенос переполнения…

Я не буду углубляться в них, но вы можете продолжать читать, чтобы понять, как каждый из них влияет на перенос

Примеры:

 .box {
  margin:5px;
  border:1px solid;
  width:150px;
} 

 <div class="box">
 <span>Hello.</span><span>Hallo.</span><span>Hello.</span><span>Hallo.</span><span>Hello.</span>
</div>
<div class="box" style="word-break:break-all">
 <span>Hello.</span><span>Hallo.</span><span>Hello.</span><span>Hallo.</span><span>Hello.</span>
</div>
<div class="box" style="overflow-wrap:break-word">
 <span>Hello.</span><span>Hallo.</span><span>Hello.</span><span>Hallo.</span><span>Hello.</span>
</div>
<div class="box" style="line-break: anywhere">
 <span>Hello.</span><span>Hallo.</span><span>Hello.</span><span>Hallo.</span><span>Hello.</span>
</div> 

Наличие множества пролетов непосредственно друг за другом означает, что все они рассматриваются как одно и то же «слово». Поскольку нет мест для перехода к новой строке, это приводит к горизонтальному переполнению.

Когда вы помещаете между ними кучу пробелов, теперь есть логические точки останова, которые браузер может использовать для переноса.

Если вы измените их на inline-block , то все они будут рассматриваться как отдельные «слова», поэтому он может выполнять разрыв строки в любом месте до или после узла span.

Писать <span>Hello.</span><span>Hello.</span><span>Hello.</span> — это фактически то же самое, что писать Hello.Hello.Hello.