Својство 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 кодот