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

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>