Обложка к записи CSS3: автоматический перенос текста
Время для прочтения: 1 мин. 32 сек.

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;
}

Поддержка браузерами

БраузерChromeFirefox (Gecko)IESafariOpera
Версия136.010.05.1
Русский язык8.010.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.

Ссылки

ВКонтакте
Pinterest
Telegram
WhatsApp

Следующая запись

Комментарии