css властивість white-space

CSS властивість white-space встановлює, як відображати пропуски між словами.

На прикладі, ми бачимо, що перший абзац показує текст, форматуючі всі пробіли до одного. А другий, маючи встановлену властивість white-space показує вже всі пробіли як і було записано у коді.

В HTML, зазвичай, будь-яка кількість пропусків показується як один. За винятком елемента <pre>, він текст виводить текст з усіма пропусками та перенесеннями рядків.

Властивість white-space поводить себе так само як елемент <pre>, але на відміну від нього не змінює шрифт на моноширний.

В таблиці нижче представлена дія значення властивості white-space на текст:

правити

Нотатка

У Firefox для <textarea> значення normal, nowrap, і pre сприймаються як pre-wrap.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;

Властивість white-space може отримувати 7 значень:

normal

Текст виводиться як зазвичай. Без задання.

автор: Svitlana

правити

nowrap

Імітує значення normal, але ігнорує переноси рядків, ввесь текст відображається одним рядком. Але додавання елемента `` переносить текст на новий рядок.

автор: Svitlana

правити

pre

Всі пропуски та переноси зберігаються. Якщо рядок виходить занадто довгим і не влазить у вікно браузера, то буде додана горизонтальна смуга прокрутки.

автор: Svitlana

правити

pre-line

Декілька пропусків з'єднаються в один, браузер самостійно визначить де потрібно переновити текст на наступний рядок.

автор: Svitlana

правити

pre-wrap

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

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
normal	1.0	1.0	1.0	4.0	12.0	5.5
pre	1.0	1.0	1.0	4.0	12.0	6.0
nowrap	1.0		1.0	4.0	12.0	5.5
pre-wrap	1.0	3.0	3.0	8.0	12.0	8.0
pre-line	1.0	3.5	3.0	9.5	12.0	8.0

Підтримка: мобільні переглядачі

Переглядач
normal	1.0	1.0	1.0
pre	1.0	1.0	1.0
nowrap	1.0	1.0	1.0
pre-wrap	1.0	9.0	3.0
pre-line	1.0	10.0	3.0

Приклади

+ запропонувати свій приклад у пісочниці

<p class="no">Цей текст ніколи не переноситься, хоч би яким довгим був рядок.</p>
<p>А цей переноситься, як звичайно, щойно сягає краю блока.</p>

p {
    width: 220px;
    border: 1px solid #ccc;
}

.no {
    white-space: nowrap;
}