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


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

CSS властивість `white-space`

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

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

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

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

Значення Перенос тексту Пробіли
normal Переноситься Не враховуються
nowrap Не переноситься Не враховуються
pre Не переноситься Враховуються
pre-line Переноситься Не враховуються
pre-wrap Переноситься Враховуються
Нотатка:

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

Синтакс

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; 
}

Додаткові посилання

Всі Коментарі (0)

Зареєструйся на сайті, аби мати змогу залишати коментарі. Зареєструватися  чи
Немає Коментарів