Правила обработки пробелов 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), мы не хотим, чтобы длинная строка кода во фрагменте кода вызывала его элемент контейнера для горизонтальной прокрутки, потому что его будет трудно читать. Мы надеемся, что в этом случае длинный код будет переноситься автоматически.
На этот раз, сравнивая различные поведенческие характеристики каждого значения атрибута в приведенной выше таблице, мы обнаружим, что значение атрибута до переноса выделяется — это именно то, что нам нужно.