hyphens: перенос слов с учётом языка
Hyphens управляет возможностью переноса внутри слов. Автоматический перенос может улучшить узкие текстовые колонки, если браузер располагает подходящими языковыми правилами.
Назначение
Hyphens управляет возможностью переноса внутри слов. Автоматический перенос может улучшить узкие текстовые колонки, если браузер располагает подходящими языковыми правилами.
Как это работает
Для auto укажите корректный lang. Manual использует разрешённые точки переноса, например мягкий дефис. Результат зависит от словаря и среды, поэтому одинаковое разбиение во всех браузерах не гарантируется.
Пример
<style>.hyphen-note{max-width:17ch;hyphens:auto;line-height:1.6}</style>
<p class="hyphen-note" lang="ru">Последовательность самостоятельных упражнений помогает проверить понимание структуры документа.</p>Что должно получиться
При наличии поддержки русского переноса длинные слова могут разделяться по подходящим местам. Если словарь недоступен, текст использует другие доступные точки разрыва.
Граница применения и частая ошибка
Не включайте перенос бездумно для кода, адресов и идентификаторов: видимый дефис может быть принят за часть значения. Lang сообщает язык текста, а не только пожелание оформления. Overflow-wrap и hyphens решают разные задачи.
Самостоятельная проверка
Сравните auto, manual и none. Проверьте русский и английский фрагменты с верными lang. Скопируйте текст в редактор и убедитесь, что декоративный перенос не был ошибочно внесён в исходное слово.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.