text-wrap
Как переносятся строки: обычно, с выравниванием длины или без одинокого слова в конце.
Синтаксис
text-wrap: balance;Значения
| Параметр | Тип | Описание |
|---|---|---|
| wrap | keyword | Обычный перенос (по умолчанию). |
| balance | keyword | Строки почти одинаковой длины — для заголовков. |
| pretty | keyword | Избегает одного короткого слова на последней строке — для абзацев. |
| nowrap | keyword | Без переносов. |
Примеры
Обычный и сбалансированный заголовок:
<style>
h3 { width: 300px; border: 1px solid lightgray; }
</style>
<h3>A heading that wraps onto a second line by default</h3>
<h3 style="text-wrap: balance;">A heading that wraps onto a second line by default</h3>Примечания
balance работает во всех актуальных браузерах с 2024 года и только для коротких текстов (несколько строк). pretty поддерживают Chrome и Safari; остальные просто переносят как обычно.
См. также
- white-space — Что делать с пробелами и переносами строк из исходного кода и можно ли переносить строки.
- text-align — Выравнивание текста и строчного содержимого внутри блока по горизонтали.
Вопросы и ответы по теме
В учебнике
- Текст и шрифты — Шрифт, размер, жирность, курсив, высота строки, выравнивание и оформление текста, подключение своего шрифта.