Обработка пробелов

Рассмотрев различные способы стилевого оформления текста, поговорим о свойстве white-space, которое влияет на то, как агент пользователя обрабатывает пробелы, символы перевода строки и табуляции в документе. Применяя это свойство, можно управлять тем, как броузер интерпретирует разделители между словами и строками текста. В какой-то мере в XHTML это уже является поведением по умолчанию: любое количество символов разделителей заменяется одним пробелом. Поэтому, реализуя следующую разметку, веб-броузер вставил бы между словами только по одному пробелу и проигнорировал бы перенос строки.

This paragraph has many
spaces in it.


Это стандартное поведение можно задать прямо:
p {white-space: normal;}

Это правило указывает броузеру поступать так, как он всегда делал: отбрасывать дополнительные пробелы. Согласно этому значению символы переноса строки (возврата каретки) преобразовываются в пробелы, и любая последовательность, состоящая из более чем одного пробела подряд, заменяется одним пробелом. Однако если присвоить свойству white-space значение pre, пробелы в элементе будут интерпретироваться так, как будто бы он является XHTML-элементом pre; т.


е. пробелы не игнорируются:

p {white-space: pre;}

This paragraph has many spaces in it.



Если значение свойства white-space равно pre, броузер будет отображать дополнительные пробелы и переносы строки. В этом отношении любой элемент можно заставить работать как элемент pre.

Противоположное значение – nowrap, которое запрещает перенос текста в элементе, за исключением случаев применения элементов
. Применение nowrap в CSS во многом похоже на объявление
для ячеек таблицы в HTML 4, за исключением того, что значение white-space может применяться к любому элементу:

This paragraph is not allowed to wrap, which
means that the only way to end a line is to insert a line-break element. If
no such element is inserted, then the line will go forever, forcing the user
to scroll horizontally to read whatever can't be initially displayed
in
the browser window.



Теперь можно применять white-space вместо атрибута nowrap ячеек таблицы:

td {white-space: nowrap;}

The contents of this cell are not wrapped. Neither are the contents of this cell. Nor this one, or any after it, or any other cell in this table. CSS prevents any wrapping from happening.


CSS2.1 предоставляет значения pre-wrap и pre-line, которых не было в более ранних версиях CSS.


Задача этих значений – предоставить более широкие возможности обработки разделителей. Если для элемента задано pre-wrap, пробелы в тексте элемента сохраняются, но строки текста прерываются где необходимо. Если задано это значение, то учитываются не только изначально заданные разрывы строк, но и сгенерированные. Значение pre-line является противоположностью pre-wrap и приводит к удалению лишних пробелов, как в обычном тексте, но учитывает разделители строк. Рассмотрим следующую разметку:

This paragraph has a great many s p a c e s within its textual
content, but their preservation will not prevent line
wrapping or line breaking.


This paragraph has a great many s p a c e s within its textual
content, but their collapse will not prevent line
wrapping or line breaking.



Как с помощью свойства white-space запретить автоматический перенос по словам

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

Статьи из раздела CSS на эту тему:
В середине
Вертикальное выравнивание текста
Выравнивание по базовой линии
Выравнивание по верхнему краю
Выравнивание по заданному расстоянию

Вернуться в раздел: CSS / 6. Свойства текста