white-space

CSS-властивість white-space (укр. — “пробіли та переноси рядків”) визначає, як обробляються пробіли, переноси рядків та інші пробільні символи в елементі. Вона дозволяє контролювати, чи буде текст переноситися на нові рядки, чи пробіли між словами зберігатимуться, а також як обробляються невидимі символи, такі як табуляції.

Інтерактивний приклад використання

Випускники GoIT працюють у 2100+ ІТ-компаній України, Європи та США

Синтаксис

white-space: normal | nowrap | pre | pre-wrap | pre-line | break-spaces;

Значення

  • normal — стандартна обробка пробілів та переносу рядків. Текст буде переноситися на новий рядок при необхідності, а пробіли між словами будуть зменшуватися до одного.
  • nowrap — текст не буде переноситися на нові рядки. Пробіли між словами зберігаються, але елемент буде відображатися в один рядок, навіть якщо він виходить за межі контейнера.
  • pre — текст відображається так, як він є в коді, з усіма пробілами, табуляціями та переносами рядків.
  • pre-wrap — поєднує поведінку pre та normal. Текст відображається з усіма пробілами і переносами рядків, але автоматично переноситься на нові рядки, якщо він виходить за межі контейнера.
  • pre-line — текст зберігає пробіли, але автоматично переноситься на нові рядки, коли це необхідно.
  • break-spaces — схоже на pre-wrap, але також дозволяє переносити пробіли, якщо текст не влазить в контейнер.

Крім цих основних значень, у будь-якої CSS-властивості є службові значення:

  • inherit — наслідує значення від батьківського елемента;
  • initial — скидає до значення за замовчуванням;
  • unset — поводиться як inherit для властивостей, що наслідуються, і як initial для ненаслідуваних;
  • revert — скасовує стилі автора і повертає значення з таблиці стилів браузера чи користувача;
  • revert-layer — повертає значення з попереднього шару каскаду (@layer).

Додаткові моменти

  • white-space корисно використовувати для управління текстом, який містить багато пробілів або спеціальних символів, таких як табуляція. Це важливо при форматуванні тексту, виведеного з кодових або текстових файлів, де форматування пробілів є критичним.
  • Властивість white-space: nowrap часто використовується для елементів, де потрібно уникнути переносу тексту, наприклад, для навігаційних панелей або кнопок.
  • Властивість white-space має значення за замовчуванням, що визначається браузером, але в CSS можна налаштувати цю властивість для конкретних елементів.
  • Властивість підтримується всіма сучасними браузерами.