css властивість white-space
CSS властивість white-space встановлює, як відображати пропуски між словами.
На прикладі, ми бачимо, що перший абзац показує текст, форматуючі всі пробіли до одного. А другий, маючи встановлену властивість white-space показує вже всі пробіли як і було записано у коді.
В HTML, зазвичай, будь-яка кількість пропусків показується як один. За винятком елемента <pre>, він текст виводить текст з усіма пропусками та перенесеннями рядків.
Властивість white-space поводить себе так само як елемент <pre>, але на відміну від нього не змінює шрифт на моноширний.
В таблиці нижче представлена дія значення властивості white-space на текст:
| Значення | Перенос тексту | Пробіли |
|---|---|---|
| normal | Переноситься | Не враховуються |
| nowrap | Не переноситься | Не враховуються |
| pre | Не переноситься | Враховуються |
| pre-line | Переноситься | Не враховуються |
| pre-wrap | Переноситься | Враховуються |
- Нотатка
-
У Firefox для
автор: Svitlana<textarea>значенняnormal,nowrap, іpreсприймаються якpre-wrap.
Синтаксис
white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;Властивість white-space може отримувати 7 значень:
-
normal -
Текст виводиться як зазвичай. Без задання.
автор: Svitlana -
nowrap -
Імітує значення
автор: Svitlananormal, але ігнорує переноси рядків, ввесь текст відображається одним рядком. Але додавання елемента `` переносить текст на новий рядок. -
pre -
Всі пропуски та переноси зберігаються. Якщо рядок виходить занадто довгим і не влазить у вікно браузера, то буде додана горизонтальна смуга прокрутки.
автор: Svitlana -
pre-line -
Декілька пропусків з'єднаються в один, браузер самостійно визначить де потрібно переновити текст на наступний рядок.
автор: Svitlana -
pre-wrap -
Всі пропуски зберігаються, але якщо рядок по ширині не поміщається в задану область, то текст автоматично буде перенесений на наступний рядок.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента.
автор: Svitlana
| Значення без задання: | normal |
|---|---|
| Наслідує: | Так |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.whiteSpace="nowrap" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 4 | 12 | 5.5 | |
| 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 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 | |
| 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 |
Приклади
+ запропонувати свій приклад у пісочниці
Верхній абзац із nowrap ніколи не переноситься — рядок тікає за рамку; нижній переноситься як звичайно.
HTML
<p class="no">Цей текст ніколи не переноситься, хоч би яким довгим був рядок.</p>
<p>А цей переноситься, як звичайно, щойно сягає краю блока.</p>CSS
p {
width: 220px;
border: 1px solid #ccc;
}
.no {
white-space: nowrap;
}Різні значення властивості
Приклад використання
Коментарі
Коментарів ще немає — будьте першим!