CSS-свойство hyphens
Используйте CSS-свойство hyphens, чтобы управлять переносом слов. Узнайте о значениях свойства и посмотрите примеры.
CSS-свойство hyphens управляет тем, как слова разбиваются дефисами при переносе текста на новую строку. Расстановка переносов означает разрыв длинного слова в подходящем месте с добавлением дефиса (-) в конце строки, чтобы текст равномерно заполнял узкие колонки, не оставляя больших пробелов и не давая длинным словам выходить за пределы блока.
На этой странице рассматриваются три значения, которые принимает свойство (none, manual и auto), роль атрибута lang, символы мягкого и жёсткого переноса, которые можно вставить вручную, а также связь hyphens с другими свойствами переноса текста.
Зачем и когда использовать hyphens
Расстановка переносов наиболее важна в узких контейнерах — боковых панелях, мобильных макетах, многоколоночном тексте или любом элементе с небольшой шириной width. Без неё одно неразрывное слово (длинный URL, химическое название, немецкое составное слово) может либо выходить за пределы блока, либо создавать неровный правый край с неудобными пробелами. Включение hyphens: auto позволяет браузеру разбивать такие слова в допустимых точках и сохранять аккуратный вид выровненного или узкого текста.
Как правило, hyphens используют вместе с text-align: justify или когда содержимое генерируется пользователем и длину слов предсказать невозможно.
hyphens: auto работает только тогда, когда известен язык элемента. Задайте его с помощью атрибута lang (например, <html lang="en">), поскольку браузеру необходим словарь переносов для данного языка, чтобы определить допустимые точки разрыва. Без lang значение auto ведёт себя как manual.
Правила расстановки переносов явно не определены в спецификации, поэтому точные точки разрыва могут различаться в разных браузерах.
| Начальное значение | none |
|---|---|
| Применяется к | Всем элементам. |
| Наследуется | Да. |
| Анимируется | Нет. |
| Версия | CSS3 |
| DOM Syntax | Object.style.hyphens = "none"; |
Синтаксис
Синтаксис CSS-свойства hyphens
hyphens: none | manual | auto | initial | inherit;Пример свойства hyphens:
Пример CSS-свойства hyphens со значениями none, manual и auto
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
width: 55px;
border: 1px solid #666;
}
p.none {
hyphens: none;
}
p.manual {
hyphens: manual;
}
p.auto {
hyphens: auto;
}
</style>
</head>
<body>
<h2>Hyphens property example</h2>
<h3>none</h3>
<p class="none">An extreme­ly lengthy sentence</p>
<h3>manual</h3>
<p class="manual">An extreme­ly lengthy sentence</p>
<h3>auto</h3>
<p class="auto" lang="en">An extreme­ly lengthy sentence</p>
</body>
</html>Результат
В приведённом примере включены все три значения, чтобы наглядно показать их различия.
Префиксы браузеров больше не требуются для современных браузеров.
Возможности разрыва строк
С помощью двух символов Unicode, представленных ниже, можно вручную задать потенциальные точки разрыва строки внутри текста:
U+00AD (SHY / мягкий перенос)
Этот символ отображается невидимо. Он указывает место, где браузер должен разбить слово, если необходим перенос. Для вставки SHY используйте .
U+2010 (HYPHEN / жёсткий дефис)
Этот символ указывает видимую возможность разрыва строки. Дефис отображается даже в том случае, если строка не разрывается в этом месте.
Значения
| Значение | Описание |
|---|---|
| none | Без переносов. Слова не разбиваются при переносах строк, даже если символы предлагают точки разрыва. |
| manual | Слова разбиваются только при переносе строки там, где внутри слова есть возможности для разрыва. Слова переносятся только в местах ‐ или ­. |
| auto | Браузер автоматически разбивает слова в подходящих точках переноса. Слова переносятся там, где это определяет алгоритм. Поведение значения auto зависит от языка. |
| initial | Устанавливает свойству его значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Связанные свойства переноса текста
hyphens — одно из нескольких CSS-свойств, определяющих, где и как может переноситься текст. Они часто используются в сочетании:
- overflow-wrap — позволяет браузеру разбивать длинное слово только тогда, когда оно иначе выходило бы за пределы контейнера, без вставки дефиса.
- word-break — управляет тем, могут ли слова разбиваться между любыми символами (полезно для текста CJK или длинных строк).
- word-wrap — устаревший псевдоним
overflow-wrap. - white-space — определяет, сворачиваются ли последовательности пробелов и переносится ли текст вообще.
- line-break — тонко настраивает правила переноса строк, в основном для азиатских языков.
Используйте hyphens для добавления дефисов в допустимых точках разрыва, а overflow-wrap / word-break — как защитный механизм для строк, не имеющих допустимых точек переноса.
Поддержка браузерами
hyphens: auto поддерживается во всех современных браузерах. В старых версиях Safari и Edge до перехода на Chromium требовались вендорные префиксы (-webkit-hyphens, -ms-hyphens), но для текущих браузеров они больше не нужны.