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

Свойството white-space контролира как се обработва текстът към елемента, към който е приложен. Да приемем, че имате HTML точно по този начин:

 A bunch of words you see.

Оформили сте div така, че да има зададена ширина 100px. При разумен размер на шрифта това е твърде много текст, за да се побере в 100px. Без да правите нищо, 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 Docs

Поддръжка на браузър

Малко по-сложна от обикновената таблица за поддръжка, тъй като всяка стойност има различни нива на поддръжка:

Браузър	Версия	Подкрепа на
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`