Компоновка строки

Во-первых, надо понимать, как компонуется строковое содержимое. Этот процесс не такой простой и ясный, как в блочных элементах, которые просто генерируют контейнеры и обычно не допускают сосуществования чего-то еще. Для сравнения загляните внутрь блочного элемента, такого как абзац. Вы вполне можете спросить: «Как все эти строки текста попали туда? Что управляет их размещением? Как я могу влиять на это?»

Чтобы понять, как происходит генерирование строк, сначала рассмотрим элемент, содержащий одну очень длинную строку текста. Заметьте, что рамка установлена вокруг строки, целиком помещена в элемент span и для нее назначен стиль:

span {border: 1px dashed black;}

Самый простой вариант строкового элемента, содержащегося в блочном элементе. В определенном смысле он ничем не отличается от абзаца, содержащего два слова. Большинство абзацев не включают явных строковых элементов, таких как span. Чтобы перейти от этого упрощенного варианта к чему-то более привычному, достаточно определить, насколько широким должен быть элемент, и затем разбить строку таким образом, чтобы получившиеся в результате части помещались в элемент по ширине.

Практически ничего не изменилось.


Мы лишь взяли одну строку и разбили ее на части, а затем поставили эти части друг над другом. Это происходит лишь потому, что для текста строкового элемента не были заданы ни отступы, ни поля. Обратите внимание, что рамки слегка перекрывают друг друга; например, нижняя рамка первой строки находится немного ниже верхней рамки второй строки. Дело в том, что на самом деле рамка отрисовывается на следующем пикселе (на мониторе) с внешней стороны каждой строки. Поскольку строки соприкасаются, их рамки будут перекрываться.

Если изменить стили элемента span, чтобы задать цвет фона, реальное размещение строк становится ясно видимым. Четыре абзаца, свойство text-align каждого из которых имеет разные значения, и фон строк закрашен. Как видите, не каждая строка доходит до края области содержимого своего абзаца-родителя, которая обозначена серой пунктирной ракой. Для абзаца, выровненного по левой границе, все строки выстроены вплотную к левому краю области содержимого абзаца и каждая строка оканчивается там, где находится ее разрыв. Для абзаца, выровненного по правому краю, имеет место обратное.

Для абзаца, выровненного по центру, центры строк выравниваются относительно центра абзаца.


В последнем случае, когда значением text-align является justi-fy, ширина каждой строки выравнивается соответственно ширине области содержимого абзаца, в результате края строки касаются обоих краев области содержимого абзаца. Разница между исходной длиной строки и шириной абзаца компенсируется за счет изменения расстояний между буквами и словами каждой строки. Следовательно, при выравнивании по ширине значение свойства word-spacing может переопределяться. (Если значение свойства letter-spacing выражено в единицах длины, оно не может быть переопределено.) Это довольно точное описание процесса создания строк в самых простых случаях. Однако, как вы вскоре увидите, строковая модель форматирования далеко не проста.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Автоматическое определение высоты
Блок-контейнер
Блок-контейнер
Блочные элементы
Вертикальное выравнивание