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.

Ссылки

Источник: https://www.kobzarev.com/makeup/css3-hyphens/

Михаил Кобзарёв

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.

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

%d такие блоггеры, как: