Белое пространство - CSS-хитрости

Свойство white-space определяет, как текст обрабатывается в элементе, к которому он применяется. Допустим, у вас есть HTML в точности так:

 A bunch of words you see.

Вы задали стиль div для ширины 100 пикселей. При разумном размере шрифта это слишком много текста, чтобы поместиться в 100 пикселей. Если ничего не делать, white-spaceзначение по умолчанию равно normal, и текст будет перенесен. См. Пример ниже или следуйте за демонстрацией дома.

div ( /* This is the default, you don't need to explicitly declare it unless overriding another declaration */ white-space: normal; )

Если вы хотите предотвратить перенос текста, вы можете применить white-space: nowrap;

Обратите внимание, что в примере кода HTML в верхней части этой статьи на самом деле есть два разрыва строки, один перед строкой текста и один после, что позволяет тексту находиться на отдельной строке (в коде). Когда текст отображается в браузере, эти разрывы строк выглядят так, как будто они удалены. Также удалены лишние пробелы в строке перед первой буквой. Если мы хотим заставить браузер отображать эти разрывы строк и лишние символы пробела, мы можем использоватьwhite-space: pre;

Это preвызвано, потому что поведение таково, как если бы вы обернули текст в

теги (которые по умолчанию обрабатывают пробелы и разрывы строк таким образом). Пробелы учитываются точно так же, как и в HTML, и текст не переносится, пока в коде не появится разрыв строки. Это особенно полезно при буквальном отображении кода, который с эстетической точки зрения выигрывает от некоторого форматирования (а некоторое время является абсолютно важным, как в языках, зависящих от пробелов!)

Возможно, вам нравится, как preсоблюдаются пробелы и разрывы, но вам нужно, чтобы текст переносился, а не вырывался из его родительского контейнера. Вот для чего white-space: pre-wrap;:

Наконец, white-space: pre-line;разрывает строки в коде, но лишние пробелы все равно удаляются.

Интересно, что последний разрыв строки не соблюдается. Согласно спецификации CSS 2.1: «Строки разрываются по сохраненным символам новой строки и по мере необходимости для заполнения строчных полей». так что, возможно, это имеет смысл.

Вот таблица, чтобы понять поведение всех различных значений:

	Новые строки	Пробелы и табуляции	Перенос текста
нормальный	Крах	Крах	Сворачивать
предварительно	Сохранять	Сохранять	Без упаковки
теперь	Крах	Крах	Без упаковки
предварительная упаковка	Сохранять	Сохранять	Сворачивать
предварительная линия	Сохранять	Крах	Сворачивать

В CSS3, то white-spaceсвойство буквально будет следовать , что диаграммы и сопоставить свойства text-space-collapseи text-wrapсоответственно.

Дополнительная информация

Документы Mozilla

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

Немного сложнее, чем обычная таблица поддержки, поскольку каждое значение имеет разные уровни поддержки:

Браузер	Версия	Поддержка
Internet Explorer	5.5	`normal \| nowrap`
	6.0	`normal \| pre \| nowrap`
	8+	`normal \| pre \| nowrap \| pre-wrap \| pre-line`
Firefox (Gecko)	1,0 (1,0)	`normal \| pre \| nowrap \| -moz-pre-wrap`
	3,0 (1,9)	`normal \| pre \| nowrap \| pre-wrap \| -moz-pre-wrap`
	3,5 (1.9.1)	`normal \| pre \| nowrap \| pre-wrap \| pre-line`
Опера	4.0	`normal \| pre \| nowrap`
	8.0	`normal \| pre \| nowrap \| pre-wrap`
	9,5	`normal \| pre \| nowrap \| pre-wrap \| pre-line`
Safari (WebKit)	1,0 (85)	`normal \| pre \| nowrap`
Safari (WebKit)	3,0 (522)	`normal \| pre \| nowrap \| pre-wrap \| pre-line`