hyphenation-compare
Время для прочтения: 0 мин. 36 сек.

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

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

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

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

Синтаксис


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.

Ссылки

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

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

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

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

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