Правила обработки пробелов HTML
«Пробелы» в HTML бывают трех типов: пробел, табуляция и перевод строки (CR/LF).
Мы знаем, что по умолчанию символы пробелов в исходном коде HTML отображаются как пробелы, и несколько последовательных символов пробелов будут рассматриваться как один, или, другими словами, несколько последовательных символов пробелов будут объединены.
Однако иногда мы надеемся, что несколько последовательных пробелов в исходном коде HTML могут быть реалистично отображены в веб-браузере, или нам нужно, чтобы разрывы строк в исходном коде функционировали как настоящие разрывы строк. Итак, мы обнаружили тег <pre>, который действительно может восстановить истинное положение пробельных символов во внутреннем тексте.
Поэтому мы часто помещаем в тег <pre> фрагмент текста, представляющий компьютерный код, и они будут показывать свои собственные эффекты отступов и переноса строк в браузере, без необходимости добавления дополнительных стилей и тегов для управления отступами. и разрывы строк.
По мере того, как наше понимание CSS продолжает углубляться, мы обнаруживаем, что все это упорядочивается атрибутом пробелов. Причина, по которой элемент <pre> настолько волшебен, заключается в том, что он имеет стиль по умолчанию {white-space: pre;}.
свойство пустого пространства
Атрибут white-space в CSS используется для установки правил обработки текстовых символов-пробелов, в том числе: объединять ли символы пробелов, сохранять ли разрывы строк и разрешать ли автоматический перенос строк. Различное поведение каждого значения атрибута показано в следующей таблице:
список значений атрибутов пробелов
| значение атрибута | пробелы | символ новой строки | Автоматический перенос строк | впервые появился в |
|---|---|---|---|---|
normal | слить | пренебрегать | позволять | CSS 1 |
nowrap | слить | пренебрегать | не разрешено | CSS 1 |
pre | бронировать | бронировать | не разрешено | CSS 1 |
pre-wrap | бронировать | бронировать | позволять | CSS 2.1 |
pre-line | слить | бронировать | позволять | CSS 2.1 |
( Примечание : в CSS1/2 атрибут пробела можно применять только к элементам уровня блока; в CSS 2.1 его можно применять ко всем элементам.)
Если нам нужно, чтобы элемент-контейнер имел поведение обработки пробелов, аналогичное элементу <pre>, просто установите для него стиль {white-space: pre;}.
Необходимость предварительной упаковки
Давайте сначала объясним поведение «автоматического переноса строк» в приведенной выше таблице. Оно относится к потоку текста внутри элемента, набираемого в направлении текста, когда поток текста встречает границу, которая ограничивает его дальнейшее расширение, следует ли переносить строку. «Перенос по словам не разрешен» означает, что поток текста выйдет за пределы элемента.
Поэтому стиль {white-space: pre;} иногда не оправдывает наших ожиданий. Например, в некоторых ситуациях, не требующих особой строгости, или при форматировании некоторых фрагментов кода, не чувствительных к разрывам строк (например, HTML или CSS), мы не хотим, чтобы длинная строка кода во фрагменте кода вызывала его элемент контейнера для горизонтальной прокрутки, поскольку его трудно читать. Мы надеемся, что в этом случае длинный код будет переноситься автоматически.
На этот раз, сравнивая различные поведенческие характеристики каждого значения атрибута в приведенной выше таблице, мы обнаружим, что значение атрибута до переноса выделяется — это именно то, что нам нужно.