Кратко
СкопированоСвойство hyphens говорит браузеру, как переносить длинные слова, которые не помещаются в строку: не переносить вовсе, переносить только там, где в HTML стоит мягкий перенос, или расставлять дефисы самостоятельно.
Пример
Скопировано
<p lang="ru"> Объявление: требуется авто­мото­вело­фото­теле­радио­монтёр.</p>
<p lang="ru">
Объявление: требуется
авто­мото­вело­фото­теле­радио­монтёр.
</p>
p { hyphens: manual; width: 160px;}
p {
hyphens: manual;
width: 160px;
}
В демо показаны все три значения. При none слово выходит за границу блока. При manual переносы происходят только там, где стоят символы ­. При auto браузер расставляет переносы сам, без каких-либо подсказок в тексте.
Как понять
СкопированоДлинное слово, которое не помещается в строку, браузер по умолчанию не разрывает — ждёт подсказки от автора. Это и есть режим manual: переносы появляются только там, где в тексте стоит символ мягкого переноса ­.
Режим auto переключает браузер в режим словаря: он знает правила переноса по слогам для конкретного языка и расставляет дефисы сам. Чтобы это заработало, нужно обязательно указать язык через атрибут lang:
<html lang="ru">
<html lang="ru">
Без lang браузер не знает, какие правила применять, и auto ведёт себя как manual.
Как пишется
Скопированоnone
СкопированоСлова не переносятся никогда — даже если выходят за границу контейнера. Удобно для заголовков или подписей к кнопкам, где перенос с дефисом выглядел бы странно.
manual
СкопированоЗначение по умолчанию. Переносы появляются только там, где в тексте стоят специальные символы:
­(U+00AD) — мягкий перенос. Невидим в тексте; дефис появляется только при реальном переносе строки.‐или&(U+2010) — жёсткий дефис. Виден в тексте всегда, независимо от переноса.# 8208;
auto
СкопированоБраузер расставляет переносы сам, по правилам переноса по слогам для языка текста. Если в тексте есть ­, они учитываются в первую очередь.
Работает для русского, английского и большинства европейских языков — в современных браузерах есть встроенные словари переносов. Для поддержки старых версий Safari добавьте вендорный префикс:
p { -webkit-hyphens: auto; hyphens: auto;}
p {
-webkit-hyphens: auto;
hyphens: auto;
}
Chrome и Firefox используют разные алгоритмы расстановки переносов и разные словари. Для одного и того же русского текста они могут перенести слова в разных местах. Это нормально: оба варианта соответствуют правилам русского языка, просто каждый браузер использует свою реализацию. Если конкретные места переносов критичны, используйте ­ вручную для одинакового поведения во всех браузерах.
Подсказки
Скопировано💡 Свойство наследуется. Можно задать hyphens на <body>, и переносы включатся сразу для всего текста на странице.
💡 hyphens отвечает за дефисы при переносе, а не за разбивку слов как таковую. Если нужно просто не допустить выход текста за границу то используйте overflow.
💡 Если применить word, слова будут разрываться без дефисов в любом месте, а hyphens перестанет работать.
- Chrome 55, поддерживается
- Edge 79, поддерживается
- Firefox 43, поддерживается
- Safari 17, поддерживается
На практике
Скопированосоветует
Скопировано🛠 hyphens особенно нужен в многоколоночных макетах. Когда текст разбивается на несколько узких столбцов через columns, длинные слова легко вылезают за границу колонки и вёрстка ломается. Добавьте переносы, и браузер сам расставит дефисы там, где это нужно:
.article { columns: 3; column-gap: 24px; hyphens: auto;}
.article {
columns: 3;
column-gap: 24px;
hyphens: auto;
}
🛠 Если вы включаете переносы глобально, через body или html, не забудьте отключить их там, где дефис будет выглядеть странно: в заголовках, кнопках, навигации. Перенос в середине слова на кнопке или в коротком заголовке выглядит как ошибка.
body { hyphens: auto;}h1, h2, h3, button, nav { hyphens: none;}
body {
hyphens: auto;
}
h1, h2, h3, button, nav {
hyphens: none;
}