Својство white-space

Својство white-space поставља како пренети текст у нови ред, као и како приказати размаке између речи и преламе редова (места где је притиснут Enter приликом уноса кода).

Синтакса

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

Вредности

Вредност	Опис
`nowrap`	Забрањује тексту да се преноси у други ред, чак и ако не стане у ширину контејнера (у том случају текст ће једноставно изаћи изван његових граница). Међутим, додавање тега `br` ће натерати текст да се пренесе у нови ред.
`pre`	Текст се приказује онако како је унет у едитору приликом верстања сајта: са свим размацима и ентер-има (ако је у коду унето више размака - на екрану ће их бити исто толико). При томе прегледач неће преносити текст у нови ред, ако не стане у контејнер - текст ће једноставно изаћи изван његових граница. Аналоган тегу 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 кода