Свойство white-space

Свойството white-space задава как текстът да се пренася на нов ред, както и как да се показват интервалите между думите и преминаванията на редове (местата, където е натиснат Enter при написването на кода).

Синтаксис

селектор {
	white-space: nowrap | pre | pre-line | pre-wrap | normal;
}

Стойности

Стойност	Описание
`nowrap`	Забранява на текста да се пренася на друг ред, дори ако не се събира в ширината на контейнера (в този случай текстът просто ще излезе извън границите му). Обаче, добавянето на таг `br` ще принуди текста да се пренесе на нов ред.
`pre`	Текстът се показва така, както е бил написан в редактора при верстката на сайта: с всички интервали и enter-и (ако в кода са въведени няколко интервала - на екрана също ще има няколко). При това браузърът няма да пренася текста на нов ред, ако не се събира в контейнера - текстът просто ще излезе извън границите му. Аналог на тага pre, но за разлика от него не променя шрифта на моноширен (за моноширен шрифт виж свойството `font-family`.
`pre-wrap`	Същото като pre, разликата е, че ако текстът е твърде дълъг и не се събира в контейнера - браузърът ще го пренесе на друг ред.
`pre-line`	Браузърът отчита само Enter-ите в HTML кода и игнорира всичко останало (няколко интервала ще изглеждат като един, браузърът сам поставя преминаванията на редове).
`normal`	Стандартно поведение: браузърът сам поставя преминаванията на реда така, че думите да се съберат в контейнера. Няколко интервала в кода ще изглеждат като един на екрана.

Стойност по подразбиране: normal.

Пример . Стойност nowrap

В този пример текстът няма да се събере в контейнера и ще излезе извън границите му, тъй като е зададена стойността nowrap:

<div id="elem">
	Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: nowrap;
	border: 1px solid red;
}

Пример . Стойност nowrap и таг br

Ако се добави таг br - текстът ще се пренесе на нов ред (точно на мястото, където стои br):

<div id="elem">
	Lorem ipsum dolor sit <br> amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: nowrap;
	border: 1px solid red;
}

Пример . Стойност pre

В този пример текстът се показва така, както е бил написан в редактора на HTML кода (с всички отстъпи с клавиш Tab, с Enter и така нататък):

<div id="elem">
	Lorem ipsum
	
		dolor sit amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: pre;
	border: 1px solid red;
}

Пример . Стойност pre-wrap

А сега текстът се показва така, както е бил написан в редактора на HTML кода, обаче, частите, които излизат се пренасят на нов ред:

<div id="elem">
	Lorem ipsum
	
		dolor sit amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: pre-wrap;
	border: 1px solid red;
}

Вижте също

свойствата word-break и overflow-wrap,
които позволяват буквите на дълга дума да се пренасят на нов ред
свойството tab-size,
което задава размера на отстъпа, създаден от клавиша Tab
свойството hyphens,
което включва пренасянето на думи по срички
свойството overflow,
което изрязва частите, които излизат извън границата на блока
таг pre,
който показва текста така, както е бил написан в редактора на HTML кода