Празнина - ЦСС-трикови | ЦСС Алманац 2025

Својство празног простора контролише начин на који се рукује текстом на елементу на који је примењен. Рецимо да имате ХТМЛ тачно овакав:

 A bunch of words you see.

Дивизирали сте див тако да има подешену ширину од 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;

Обратите пажњу на пример ХТМЛ кода на врху овог чланка, заправо постоје два прелома реда, један пре реда текста и један после њега, који омогућавају да текст буде у својој линији (у коду). Када се текст приказује у прегледачу, те преломе редова изгледају као да су уклоњене. Такође су уклоњени додатни размаци на линији пре првог слова. Ако желимо да приморамо прегледач да прикаже те преломе линија и додатне празнине које можемо користитиwhite-space: pre;

Зове се preзато што је понашање такво као да сте умотали текст

ознаке (које подразумевано обрађују размаке и линије се прекидају на тај начин). Празни простор се поштује тачно као у ХТМЛ-у и текст се не премотава док у коду не буде прелома ретка. Ово је посебно корисно када се буквално приказује код, који има неке естетске користи од неког форматирања (а неко време је апсолутно кључно, као у језицима који зависе од празног простора!)

Можда вам се свиђа како се preпоштују размаци и преломи, али текст треба да се умота уместо да потенцијално избије из надређеног контејнера. За то white-space: pre-wrap;служи:

Коначно, white-space: pre-line;прекидаће редове тамо где прекидају код, али додатни размак је и даље лишен.

Занимљиво је да коначна пауза у реду није испоштована. Према спецификацији ЦСС 2.1: „Редови се прекидају код сачуваних знакова новог реда и према потреби за попуњавање поља.“ па можда то има смисла.

Ево табеле за разумевање понашања свих различитих вредности:

	Нове линије	Простори и картице	Прелом текста
нормално	Колапс	Колапс	Замотајте
пре	Сачувај	Сачувај	Без омота
новрап	Колапс	Колапс	Без омота
претходно завити	Сачувај	Сачувај	Замотајте
предлинија	Сачувај	Колапс	Замотајте

У ЦСС3 је white-spaceимовина је буквално ће пратити ту карту и карту својства да text-space-collapseи text-wrapу складу са тим.

Више информација

Мозилла Доцс

Подршка прегледача

Нешто сложенији од редовне табеле подршке, јер свака вредност има различите нивое подршке:

Прегледач	Верзија	Подршка
интернет претраживач	5.5	`normal \| nowrap`
	6.0	`normal \| pre \| nowrap`
	8+	`normal \| pre \| nowrap \| pre-wrap \| pre-line`
Фирефок (Гецко)	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`
Сафари (ВебКит)	1.0 (85)	`normal \| pre \| nowrap`
Сафари (ВебКит)	3,0 (522)	`normal \| pre \| nowrap \| pre-wrap \| pre-line`