Во многих письменных языках можно разбивать строки как между слогами, так и между словами. Часто это делается для того, чтобы в строке текста можно было разместить больше символов с целью уменьшения количества строк в текстовой области и, таким образом, экономии места. В таких языках разрыв визуально обозначается дефисом («-»).
Текстовый модуль CSS уровня 3 определяет свойство дефисов, позволяющее контролировать, когда дефисы отображаются пользователям и как они ведут себя при отображении. Начиная с версии 55, в Chrome реализовано свойство дефисов. Согласно спецификации свойство дефисов имеет три значения: none , manual и auto . Чтобы проиллюстрировать это, нам нужно использовать мягкий дефис ( ­ ), как в следующем примере.
Google ipsum dolor sit amet, consectetur adipiscing e­lit.
Мягкий дефис — это тот, который будет отображаться только тогда, когда он находится на конечном поле. То, как этот дефис отображается в Chrome 55 или более поздней версии, зависит от значения свойства CSS hypens .
-webkit-hyphens: manual;
hyphens: manual;
Их объединение дает такой результат:
Обратите внимание, что мягкий дефис не виден. Во всех случаях, когда слово, содержащее мягкий дефис, помещается в одну строку, дефис будет невидим. Теперь давайте посмотрим, как ведут себя все три значения дефиса.
Не используя ничего
В первом примере для свойства дефисов установлено значение none . Это предотвращает отображение мягкого дефиса. Вы можете подтвердить это, отрегулировав размер окна так, чтобы слово «элит» не помещалось в видимую строку текста.
Использование руководства
Во втором примере для свойства дефисов установлено значение manual что означает, что мягкий дефис появится только тогда, когда поле выходит за пределы слова «элит». Опять же, вы можете подтвердить это, отрегулировав размер окна.
Использование авто
В третьем примере для свойства дефисов установлено значение auto . В этом случае мягкий дефис не требуется, поскольку пользовательский агент автоматически определит расположение дефиса. Если вы измените размер окна, вы увидите, что браузер расставляет переносы в этом примере в том же месте, что и во втором, хотя мягкий перенос отсутствует. Если вы продолжите сжимать окно, вы увидите, что ваш браузер может разрывать строки между любыми двумя слогами в тексте.