Время для прочтения: 1 мин. 16 сек.

CSS3: автоматический перенос текста

Раньше браузеры не умели переносить текст в автоматическом режиме как это происходило в печатных медиаресурсах.

Но всё изменилось с приходом спецификации CSS3, которая даёт нам возможность при помощи свойства hyphens управлять поведением переносов в браузерах.

Работает при условии, что текст выровнен по ширине: text-align: justify

Синтаксис


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.

Ссылки

Поделиться
Плюсануть
Телеграмнуть

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

Нажимая на кнопку "Отправить", я даю согласие на обработку персональных данных.