CSS3: автоматический перенос текста
Раньше браузеры не умели переносить текст в автоматическом режиме как это происходило в печатных медиаресурсах.
Но всё изменилось с приходом спецификации CSS3, которая даёт нам возможность при помощи свойства hyphens управлять поведением переносов в браузерах.
Работает при условии, что текст выровнен по ширине: text-align: justify
Установка языка
Язык веб-страницы устанавливается с помощью атрибута HTML lang:
<html lang="en">
Это лучший способ установки языка для всех веб-страниц, включены там переносы или нет. Установка языка поможет инструментам для автоматического перевода, скринридерам и другим вспомогательным программам.
Синтаксис
p {
text-align: justify;
}
/* нет переносов */
p.foo {
hyphens: none;
}
/* ручной режим: поставить в месте возможного переноса */
p.bar {
hyphens: manual;
}
/* автоматический режим */
p.foobar {
hyphens: auto;
}
Поддержка браузерами
| Браузер | Chrome | Firefox (Gecko) | IE | Safari | Opera |
|---|---|---|---|---|---|
| Версия | 13 | 6.0 | 10.0 | 5.1 | — |
| Русский язык | — | 8.0 | 10.0 | — | — |
| Свойство | -webkit-hyphens | -moz-hyphens | -ms-hyphens | -webkit-hyphens | — |
Кроссбраузерно это выглядит так:
p {
text-align: justify;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
В браузерах, которые не поддерживают свойство hyphens, можно использовать JS-библиотеку hyphenator.
Ссылки
- -moz-hyphens
- Better Paragraphs With CSS3 Hyphenation
- Всё, что нужно знать об автоматических переносах в CSS
