CSS text-wrap: balance — рівні рядки в заголовках

CSS властивість text-wrap керує перенесенням тексту. Найцікавіші значення — balance і pretty.

правити

Загальний опис

balance вирівнює довжину рядків у заголовку. Замість «три слова в першому рядку і одне в другому» браузер розкладе їх порівну — заголовок перестане виглядати обірваним.

pretty вирішує іншу біду: висяче слово, коли останній рядок абзацу складається з одного короткого слова. Алгоритм повільніший, тому призначений для основного тексту, а не для всієї сторінки.

правити

Порада

balance — для заголовків (він працює лише для кількох рядків), pretty — для абзаців. Різні задачі, різні значення.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

text-wrap: wrap | nowrap | balance | pretty | stable;

Властивість text-wrap може отримувати 5 значень:

wrap

Звичайне перенесення.

автор: NagarD

правити

nowrap

Без перенесення.

автор: NagarD

правити

balance

Рядки балансуються за довжиною (для заголовків).

автор: NagarD

правити

pretty

Повільніший, але гарніший алгоритм — без висячих слів.

автор: NagarD

правити

stable

Перенесення не змінюється при редагуванні попередніх рядків.

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
text-wrap	114+	121+	17.5+	100+	114+	-

Підтримка: мобільні переглядачі

Переглядач
text-wrap	114+	yes	yes	17.5+

Приклади

+ запропонувати свій приклад у пісочниці

<h2 class="balanced">Довгий заголовок, який не влазить в один рядок</h2>
<p class="pretty">Абзац, у якому останнє слово більше не висітиме саме.</p>

.balanced {
    text-wrap: balance;
    max-width: 20ch;
}

.pretty {
    text-wrap: pretty;
}