В hyphensуправлении собственностью Расстановка переносы текста в элементах уровня блока. Вы можете запретить расстановку переносов вообще, разрешить это или разрешить только при наличии определенных символов.
Обратите внимание, что это hyphensзависит от языка. Его способность находить возможности прерывания зависит от языка, определенного в langатрибуте родительского элемента. Пока поддерживаются не все языки, и поддержка зависит от конкретного браузера.
Синтаксис
p ( hyphens: none | manual | auto )дефисы: нет
Слова никогда не переносятся при переносе строки, даже если символы внутри слова указывают на то, где перенос может или должен идти.
дефисы: руководство
Слова прерываются только в тех местах, где внутри слова есть символы, указывающие на возможность разрыва строки. Есть два символа, которые указывают на возможность разрыва строки:
U+2010(ДЕФИС): «жесткий» дефис указывает на возможность видимого разрыва строки. Даже если линия на этом не разорвана, дефис все равно отображается. Буквально «-».U+00AD(SHY): невидимый, «мягкий» дефис. Этот персонаж не отображается визуально; вместо этого он предлагает место, где браузер может при необходимости разбить слово. В HTML вы можете использовать-для вставки мягкого дефиса.
дефисы: авто
Слова могут быть разбиты в соответствующих точках переноса либо в соответствии с символами переноса (см. Выше) внутри слова, либо в соответствии с автоматическим определением соответствующего языка ресурсом для расстановки переносов (если это поддерживается браузером или предоставляется через @hyphenation-resource).
Символы условных переносов внутри слова, если они есть, имеют приоритет над автоматическими ресурсами при определении точек переноса в слове.
дефисы: все
Не рекомендуется, не использовать . Это было временно только в спецификации для тестирования.
Демо
В приведенной ниже демонстрации есть несколько абзацев, и все настроено hyphens: auto;для демонстрации концепции расстановки переносов. langАтрибут установлен enна родительский элемент.
Поддержка браузера
Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| 88 | 6 * | 10 * | 12 * | 5.1 * |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 год | 4,2-4,3 * |
Требуется Safari 5+ -webkit-, Firefox 6+ -moz-, IE 10+ -ms-, iOS 4.2+ -webkit-.
Chrome <55 и браузер Android фактически поддерживают -webkit-hyphens: none, что является значением по умолчанию, но ни одно из других значений.
В Firefox и Internet Explorer автоматическая расстановка переносов работает только для некоторых языков (определенных с помощью langатрибута). См. Это примечание для получения полного списка поддерживаемых языков.
Если вы пишете веб-документ, который действительно нуждается в переносе, вы можете использовать Hyphenator.js, библиотеку, основанную на обширном словаре, который автоматически вставляет мягкие дефисы и пробелы нулевой ширины в ваш контент.
Без JavaScript вам придется полагаться hyphensи на word-wrap:
.hyphenate ( word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; )