Пробіл - CSS-хитрощі | Альманах CSS 2025

Властивість пробілу контролює спосіб обробки тексту з елементом, до якого він застосований. Скажімо, у вас HTML точно такий:

 A bunch of words you see.

Ви створили стиль div для встановленої ширини 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;

Зверніть увагу на приклад 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`