/css/white-space:> Отображение текста_
Свойство white-space
Синтаксис
CSS 1
CSS 2‒2.2
CSS 3
white-space: normal | pre | nowrap | pre-wrap | pre-line | inherit
Описание
Свойство white-space
указывает способ отображения текста веб-браузером (учитывать или нет все пробелы в тексте; включить или отключить автоперенос текста).
Применяется: | ко всем элементам; |
---|---|
Наследование: | присутствует; |
Проценты: | не используются; |
Медиа: | визуальные. |
JavaScript
[объект]
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
Значения
- normal
- Выводит текст как обычно. Между символами текста остаётся только один пробел, а так же перевод текста на новую строку осуществляется в автоматическом режиме либо принудительным путём (с помощью HTML элемента
br
).white-space: normal;
- pre
- Выводит текст с сохранением всех пробельных символов. При этом текст переводится на другую строку с помощью ручного («
CRLF
») или принудительного перевода строки. (В элементах с фиксированной шириной текст может выходить за рамки родительского элемента.)white-space: pre;
Примечание: данный параметр по действию аналогичен HTML элементу
pre
. - nowrap
- Выводит текст с сжатием любого количества (идущих подряд) пробелов между символами до одного. При этом текст переводится на другую строку только с помощью принудительного перевода строки (с помощью HTML элемента
br
). (В элементах с фиксированной шириной текст может выходить за рамки родительского элемента.)white-space: nowrap;
- pre-wrap
- Выводит текст с сохранением всех пробельных символов. При этом текст переводится на новую строку автоматически, а так же может быть переведён вручную («
CRLF
») или принудительного.white-space: pre-wrap;
- pre-line
- Выводит текст с сжатием любого количества (идущих подряд) пробелов между словами до одного. При этом текст переводится на новую строку автоматически, а так же может быть переведён вручную («
CRLF
») или принудительного.white-space: pre-line;
- inherit
- Указывает, что элемент должен унаследовать параметры родительского элемента.
Начальное значение: «normal
».
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Свойство white-space</title>
</head>
<body>
<h1>Отображение текста</h1>
<h2>***</h2>
<p style="white-space: pre-line">В пустом, сквозном чертоге сада
Иду, шумя сухой листвой:
Какая странная отрада
Былое попирать ногой!
Какая сладость всё, что прежде
Ценил так мало, вспоминать!
Какая боль и грусть ‒ в надежде
Ещё одну весну узнать!</p>
<address><b>И. А. Бунин</b></address>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Свойство white-space</title>
</head>
<body>
<h1>Отображение текста</h1>
<h2>***</h2>
<p style="white-space: pre-line">В пустом, сквозном чертоге сада
Иду, шумя сухой листвой:
Какая странная отрада
Былое попирать ногой!
Какая сладость всё, что прежде
Ценил так мало, вспоминать!
Какая боль и грусть ‒ в надежде
Ещё одну весну узнать!</p>
<address><b>И. А. Бунин</b></address>
</body>
</html>
Свойство white-space