/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

[объект].style.whiteSpace="[значение]";


Поддержка браузерами

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">В пустом, сквозном чертоге сада
Иду, шумя сухой листвой:
Какая странная отрада
Былое попирать ногой!
Какая сладость всё, что прежде
Ценил так мало, вспоминать!
Какая боль и грусть &#8210; в надежде
Ещё одну весну узнать!</p>
<address><b>И. А. Бунин</b></address>
</body>
</html>
Свойство white-space