Пошук уроків, статей та іншого контенту
Керуйте перенесенням рядків, пробілами й відображенням тексту за допомогою властивості white-space.
white-spaceВластивість white-space визначає, як браузер обробляє пробіли, табуляції та перенесення рядків у тексті:
чи об’єднувати послідовні пробіли в один;
чи зберігати перенесення рядків із HTML;
чи дозволяти автоматичне перенесення тексту;
чи зберігати пробіли наприкінці рядка.
.selector {
white-space: значення;
}За замовчуванням використовується:
.selector {
white-space: normal;
}white-spacenormalЗвичайний режим для більшості тексту:
послідовні пробіли об’єднуються в один;
перенесення рядків у HTML не зберігаються;
текст автоматично переноситься, якщо не поміщається в рядок.
<p class="normal">
Рядок 1
Рядок 2
</p>.normal {
white-space: normal;
}У браузері цей текст відобразиться приблизно як:
Рядок 1 Рядок 2Кілька пробілів між словами також стануть одним пробілом.
nowrapРежим nowrap об’єднує пробіли, але забороняє автоматичне перенесення тексту:
.title {
white-space: nowrap;
}Це корисно для:
коротких заголовків;
підписів до кнопок;
елементів навігації;
тексту, який має залишатися в одному рядку.
Якщо текст виявиться ширшим за контейнер, він може вийти за його межі. Тому nowrap потрібно використовувати лише там, де це передбачено дизайном.
preЗначення pre поводиться подібно до HTML-елемента <pre>:
пробіли зберігаються;
перенесення рядків зберігаються;
автоматичного перенесення немає.
<p class="pre-text">
Перший рядок
Другий рядок із відступом
</p>.pre-text {
white-space: pre;
}Браузер збереже і перенесення, і відступ перед другим рядком. Якщо довгий рядок не поміститься, він може спричинити горизонтальне переповнення.
pre-wrappre-wrap зберігає пробіли та перенесення рядків, але дозволяє автоматично переносити довгі рядки:
.description {
white-space: pre-wrap;
}Це зручний варіант для тексту, введеного користувачем, коли потрібно зберегти його форматування, але не допустити виходу тексту за межі контейнера.
<p class="description">Перший рядок
Другий рядок із відступом
Третій рядок</p>Браузер збереже перенесення та відступи, а надто довгі рядки перенесе автоматично.
pre-lineЗначення pre-line зберігає перенесення рядків, але об’єднує послідовні пробіли:
.message {
white-space: pre-line;
}<p class="message">Перший рядок
Другий рядок
Третій рядок</p>Результат:
рядки залишаться окремими;
п’ять пробілів між словами перетворяться на один;
текст автоматично переноситиметься за шириною контейнера.
pre-line часто підходить для повідомлень або описів, у яких важливі перенесення рядків, але не точна кількість пробілів.
break-spacesbreak-spaces схоже на pre-wrap, але має суворіше збереження пробілів:
пробіли зберігаються;
перенесення рядків зберігаються;
текст може переноситися;
пробіли наприкінці рядка також враховуються під час перенесення.
.code-output {
white-space: break-spaces;
}Це корисно для відображення тексту, де кожен пробіл має значення, але довгі послідовності пробілів не повинні створювати горизонтальне переповнення.
Для вибору значення можна орієнтуватися на таку поведінку:
normal — звичайний текст із автоматичними перенесеннями;
nowrap — один рядок без автоматичних перенесень;
pre — повністю зберегти пробіли й перенесення, не переносити довгі рядки;
pre-wrap — зберегти пробіли й перенесення, але дозволити автоматичні перенесення;
pre-line — зберегти перенесення, але об’єднати зайві пробіли;
break-spaces — зберегти пробіли та дозволити переносити навіть послідовності пробілів.
У наступному прикладі той самий текст показано в різних режимах:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Властивість white-space</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 24px;
font-family: Arial, sans-serif;
line-height: 1.5;
background: #f3f4f6;
}
.examples {
display: grid;
gap: 16px;
max-width: 720px;
margin: 0 auto;
}
.example {
min-width: 0;
padding: 16px;
border: 1px solid #d1d5db;
border-radius: 8px;
background: white;
}
.example h2 {
margin: 0 0 8px;
font-size: 18px;
}
.text {
margin: 0;
padding: 12px;
border-radius: 4px;
background: #f9fafb;
font-family: monospace;
overflow-wrap: break-word;
}
.normal {
white-space: normal;
}
.nowrap {
white-space: nowrap;
overflow-x: auto;
}
.pre {
white-space: pre;
overflow-x: auto;
}
.pre-wrap {
white-space: pre-wrap;
}
.pre-line {
white-space: pre-line;
}
.break-spaces {
white-space: break-spaces;
}
</style>
</head>
<body>
<main class="examples">
<section class="example">
<h2>normal</h2>
<p class="text normal">Перший рядок
Другий рядок із пробілами</p>
</section>
<section class="example">
<h2>nowrap</h2>
<p class="text nowrap">Цей текст завжди залишається в одному рядку, навіть якщо контейнер вузький.</p>
</section>
<section class="example">
<h2>pre</h2>
<p class="text pre">Перший рядок
Другий рядок із відступом</p>
</section>
<section class="example">
<h2>pre-wrap</h2>
<p class="text pre-wrap">Перший рядок
Другий рядок із відступом і довгим текстом, який може автоматично перенестися на новий рядок.</p>
</section>
<section class="example">
<h2>pre-line</h2>
<p class="text pre-line">Перший рядок
Другий рядок із кількома пробілами</p>
</section>
<section class="example">
<h2>break-spaces</h2>
<p class="text break-spaces">Слово з великою кількістю пробілів між частинами тексту</p>
</section>
</main>
</body>
</html>Зверніть увагу на різницю між pre-wrap і pre-line:
pre-wrap зберігає кількість пробілів;
pre-line зберігає перенесення, але стискає послідовності пробілів.
white-space і HTMLПеренесення рядка в HTML-файлі саме по собі не гарантує перенесення в браузері:
<p>
Перший рядок
Другий рядок
</p>За white-space: normal браузер сприйме це як текст із пробілом між словами.
Щоб перенесення збереглося, можна використати:
p {
white-space: pre-line;
}Або явно вставити елемент <br>:
<p>
Перший рядок<br>
Другий рядок
</p><br> створює примусовий перенос у конкретному місці. white-space натомість змінює правила обробки всього текстового вмісту елемента.
Якщо текст приходить від користувача або з бази даних і містить перенесення рядків, pre-line або pre-wrap допоможуть відобразити його зрозуміло.
pre-lineВикористовуйте pre-line, якщо важливі лише перенесення рядків:
.comment {
white-space: pre-line;
}Зайві пробіли при цьому не зберігатимуться.
pre-wrapВикористовуйте pre-wrap, якщо форматування пробілами має значення:
.user-content {
white-space: pre-wrap;
overflow-wrap: anywhere;
}overflow-wrap: anywhere дозволяє переносити дуже довгі слова або рядки, які інакше можуть вийти за межі контейнера. Це окрема властивість: white-space керує правилами пробілів і перенесень, а overflow-wrap — розривом довгих слів.
У режимі normal пробіли на початку та в кінці рядків зазвичай не мають видимого ефекту. У режимах, які зберігають пробіли, вони можуть впливати на ширину тексту та його перенесення.
Для більшості звичайних текстів не потрібно намагатися створювати відступи пробілами:
<!-- Ненадійний спосіб створити відступ -->
<p> Текст</p>Краще використовувати CSS:
p {
padding-left: 24px;
}Так відступ буде передбачуваним і не залежатиме від режиму white-space.
Перед застосуванням white-space визначте, що саме потрібно зберегти:
Для звичайного абзацу використовуйте normal.
Для короткого тексту в один рядок — nowrap.
Для форматованого тексту без автоматичних перенесень — pre.
Для форматованого тексту з автоматичними перенесеннями — pre-wrap.
Для збереження перенесень без збереження зайвих пробілів — pre-line.
Для точного збереження пробілів із можливістю переносити їх — break-spaces.
<p>
Рядок 1
Рядок 2
</p>За замовчуванням це не два видимі рядки. Для збереження перенесень використовуйте pre-line або pre-wrap.
nowrap без контролю переповнення.navigation {
white-space: nowrap;
}Якщо елемент вузький, текст може вийти за його межі. Перевіряйте такий компонент на малих екранах і, за потреби, додавайте горизонтальне прокручування або інший спосіб адаптації.
pre для довгого текстуpre не переносить довгі рядки автоматично. Для тексту, який має поміщатися в контейнер, частіше потрібен pre-wrap.
Кілька пробілів — нестабільний спосіб форматування в режимі normal. Для відступів використовуйте margin, padding або властивості layout.
pre-wrap і pre-linepre-wrap зберігає послідовні пробіли;
pre-line об’єднує послідовні пробіли, але зберігає перенесення рядків.
white-space керує пробілами, перенесеннями рядків і автоматичним переносом тексту.
normal є стандартним режимом для звичайного тексту.
nowrap забороняє автоматичні перенесення.
pre зберігає форматування, але не переносить довгі рядки.
pre-wrap зберігає пробіли й перенесення та дозволяє автоматичні перенесення.
pre-line зберігає перенесення, але стискає послідовні пробіли.
break-spaces зберігає пробіли з можливістю переносити їх.
Для форматованого тексту користувача найчастіше підходить pre-line або pre-wrap.
white-space не замінює padding, margin чи <br> у всіх ситуаціях: кожен інструмент має власне призначення.