css властивість white-space
CSS властивість white-space встановлює, як відображати пропуски між словами.
На прикладі, ми бачимо, що перший абзац показує текст, форматуючі всі пробіли до одного. А другий, маючи встановлену властивість white-space показує вже всі пробіли як і було записано у коді.
В HTML, зазвичай, будь-яка кількість пропусків показується як один. За винятком елемента <pre>, він текст виводить текст з усіма пропусками та перенесеннями рядків.
Властивість white-space поводить себе так само як елемент <pre>, але на відміну від нього не змінює шрифт на моноширний.
В таблиці нижче представлена дія значення властивості white-space на текст:
| Значення | Перенос тексту | Пробіли |
|---|---|---|
| normal | Переноситься | Не враховуються |
| nowrap | Не переноситься | Не враховуються |
| pre | Не переноситься | Враховуються |
| pre-line | Переноситься | Не враховуються |
| pre-wrap | Переноситься | Враховуються |
| Нотатка: | У Firefox для |
Синтаксис
white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;Властивість white-space може отримувати 7 значень:
normalТекст виводиться як зазвичай. Без задання.
nowrapІмітує значення
normal, але ігнорує переноси рядків, ввесь текст відображається одним рядком. Але додавання елемента `` переносить текст на новий рядок.preВсі пропуски та переноси зберігаються. Якщо рядок виходить занадто довгим і не влазить у вікно браузера, то буде додана горизонтальна смуга прокрутки.
pre-lineДекілька пропусків з'єднаються в один, браузер самостійно визначить де потрібно переновити текст на наступний рядок.
pre-wrapВсі пропуски зберігаються, але якщо рядок по ширині не поміщається в задану область, то текст автоматично буде перенесений на наступний рядок.
initialВстановлює властивість у значення без задання
inheritВказує на спадковість властивості від свого батьківського елемента.
| Значення без задання: | normal |
|---|---|
| Наслідує: | Так |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.whiteSpace="nowrap" |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| normal | 5.5 |
1.0 |
4.0 |
1.0 |
1.0 |
12.0 |
| pre | 6.0 |
12.0 |
1.0 |
4.0 |
1.0 |
1.0 |
| nowrap | 5.5 |
12.0 |
1.0 |
4.0 |
1.0 |
1.0 |
| pre-wrap | 8.0 |
12.0 |
1.0 |
8.0 |
3.0 |
3.0 |
| pre-line | 8.0 |
12.0 |
1.0 |
9.5 |
3.0 |
3.5 |
| Переглядач | |||
|---|---|---|---|
| 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 {
white-space: nowrap;
}