hyphens

Определение и применение

Свойство hyphens разрешает или запрещает перенос слов по частям с обозначением переноса. Оно полезно для узких текстовых колонок, где длинные слова оставляют большие пустоты или выходят за границу.

Как настроить переносы длинных слов — в уроке «Форматирование текста в CSS».

Попробуйте значения hyphens

В слове с мягким переносом manual разрешает разрыв в заданной точке. auto использует словарь языка; наличие словаря зависит от браузера и системы.

Значение свойстваhyphens: none;hyphens: manual;hyphens: auto;

Что меняем

hyphens: none

HTML и CSS примера

HTML

<div class="stage">
  <p class="demo-target" lang="ru">
    Слово электро&shy;станция содержит мягкий перенос.
  </p>
</div>

HTML

<div class="stage">
  <p class="demo-target" lang="ru">
    Электростанция обеспечивает электричеством расположенные поблизости
    предприятия.
  </p>
</div>

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.stage {
  overflow: auto;
}
.demo-target {
  width: 150px;
  margin: 0;
  font-size: 18px;
  hyphens: none;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.stage {
  overflow: auto;
}
.demo-target {
  width: 150px;
  margin: 0;
  font-size: 18px;
  hyphens: manual;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  background: white;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.stage {
  overflow: auto;
}
.demo-target {
  width: 150px;
  margin: 0;
  font-size: 18px;
  hyphens: auto;
}

Поддержка браузерами

Спецификация: CSS text

Поддерживается во всех основных браузерах с 2023 года.

Поддержка автоматических переносов зависит от языка и наличия словаря.

ВсеКомпьютерыМобильные

Совместимостьcss.properties.hyphens
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`hyphens`	✓55	✓79	✓43	✓42	✓17	✓55	✓43	✓42	✓17	✓6.0	✓55	✓17
`auto`	✓88	✓88	✓6	✓74	✓5.1	✓55	✓6	✓42	✓4.2	✓6.0	✓55	✓4.2
Hyphenation dictionary for Afrikaans (af, af-*)	✓112	✓112	✓8	✓98	×	✓112	✓8	✓75	×	✓23.0	✓112	×
Hyphenation dictionary for Albanian (sq, sq-*)	✓112	✓112	×	✓98	×	✓112	×	✓75	×	✓23.0	✓112	×
Hyphenation dictionary for Ahmaric (am, am-*)	✓112	✓112	×	✓98	×	✓112	×	✓75	×	✓23.0	✓112	×
Hyphenation dictionary for Armenian (hy, hy-*)	✓87	✓87	×	✓73	×	✓87	×	✓62	×	✓14.0	✓87	×
Hyphenation dictionary for Assamese (as, as-*)	✓87	✓87	×	✓73	×	✓87	×	✓62	×	✓14.0	✓87	×
Hyphenation dictionary for Basque (be, be-*)	✓87	✓87	×	✓73	×	✓87	×	✓62	×	✓14.0	✓87	×
Hyphenation dictionary for Belarusian (be, be-*)	✓87	✓87	×	✓73	×	✓87	×	✓62	×	✓14.0	✓87	×
Hyphenation dictionary for Bengali (bn, bn-*)	✓87	✓87	×	✓73	×	✓87	×	✓62	×	✓14.0	✓87	×
Hyphenation dictionary for Bosnian, Serbian, and Serbo-Croatian (sh, sh-, sr, sr-, bs, bs-*)	×	×	✓8	×	×	×	✓8	×	×	×	×	×
Hyphenation dictionary for Bulgarian (bg, bg-*)	✓87	✓87	✓8	✓73	×	✓87	✓8	✓62	×	✓14.0	✓87	×
Hyphenation dictionary for Catalan (ca, ca-*)	×	×	✓8	×	✓5.1	×	✓8	×	✓5	×	×	✓5
Hyphenation dictionary for Croatian (hr, hr-*)	✓87	✓87	✓8	✓73	✓9.1	✓87	✓8	✓62	✓9.3	✓14.0	✓87	✓9.3
Hyphenation dictionary for Mongolian (Cyrillic) (mn-cyrl, mn-cyrl-*)	✓87	✓87	×	✓73	×	✓87	×	✓62	×	✓14.0	✓87	×
Hyphenation dictionary for Czech (cs, cs-*)	✓112	✓112	✓130	✓98	✓9.1	✓112	✓130	✓75	✓9.3	✓23.0	✓112	✓9.3
Hyphenation dictionary for Danish (da, da-*)	✓87	✓87	✓8	✓73	✓5.1	✓87	✓8	✓62	✓5	✓14.0	✓87	✓5
Hyphenation dictionary for Dutch (nl, nl-*)	✓112	✓112	✓8	✓98	✓5.1	✓112	✓8	✓75	✓5	✓23.0	✓112	✓5
Словарь английского языка	✓55	✓12	✓6	✓44	✓5.1	✓55	✓6	✓43	✓5	✓6.0	✓55	✓5
Hyphenation dictionary for Esperanto (eo, eo-*)	×	×	✓8	×	×	×	✓8	×	×	×	×	×
Hyphenation dictionary for Estonian (et, et-*)	✓87	✓87	✓8	✓73	×	✓87	✓8	✓62	×	✓14.0	✓87	×
Hyphenation dictionary for Ethiopic script (mul-ethi, mul-ethi-*)	✓112	✓112	×	✓98	×	✓112	×	✓75	×	✓23.0	✓112	×
Hyphenation dictionary for Ethiopic script (und-ethi, und-ethi-*)	✓87	✓87	×	✓73	×	✓87	×	✓62	×	✓14.0	✓87	×
Hyphenation dictionary for Finnish (fi, fi-*)	×	×	✓8	×	✓9.1	×	✓8	×	✓9.3	×	×	✓9.3
Hyphenation dictionary for French (fr, fr-*)	✓87	✓87	✓8	✓73	✓5.1	✓87	✓8	✓62	✓5	✓14.0	✓87	✓5
Hyphenation dictionary for Galician (gl, gl-*)	✓112	✓112	✓9	✓98	×	✓112	✓9	✓75	×	✓23.0	✓112	×
Hyphenation dictionary for Georgian (ka, ka-*)	✓112	✓112	×	✓98	×	✓112	×	✓75	×	✓23.0	✓112	×
Hyphenation dictionary for German, Reformed Orthography of 1996 (de, de-1996, de-DE, de-AT, de-*)	✓87	✓87	✓8	✓73	✓5.1	✓87	✓8	✓62	✓5	✓14.0	✓87	✓5
Hyphenation dictionary for German, Swiss Orthography (de-CH, de-CH-*)	✓87	✓87	✓8	✓73	×	✓87	✓8	✓62	×	✓14.0	✓87	×
Hyphenation dictionary for German, Traditional Orthography of 1901 (de-1901, de-AT-1901, de-DE-1901)	✓87	✓87	✓8	✓73	×	✓87	✓8	✓62	×	✓14.0	✓87	×
Hyphenation dictionary for Gujarati (gu, gu-*)	✓87	✓87	×	✓73	×	✓87	×	✓62	×	✓14.0	✓87	×
Hyphenation dictionary for Hindi (hi, hi-*)	✓87	✓87	×	✓73	×	✓87	×	✓62	×	✓14.0	✓87	×
Hyphenation dictionary for Hungarian (hu, hu-*)	✓87	✓87	✓9	✓73	✓9.1	✓87	✓9	✓62	✓9.3	✓14.0	✓87	✓9.3
Hyphenation dictionary for Icelandic (is, is-*)	×	×	✓8	×	×	×	✓8	×	×	×	×	×
Hyphenation dictionary for Interlingua (ia, ia-*)	×	×	✓8	×	×	×	✓8	×	×	×	×	×
Hyphenation dictionary for Irish (ga, ga-*)	✓87	✓87	×	✓73	×	✓87	×	✓62	×	✓14.0	✓87	×
Hyphenation dictionary for Italian (it, it-*)	✓112	✓112	✓9	✓98	✓5.1	✓112	✓9	✓75	✓5	✓23.0	✓112	✓5
Hyphenation dictionary for Kannada (kn, kn-*)	✓87	✓87	×	✓73	×	✓87	×	✓62	×	✓14.0	✓87	×
Hyphenation dictionary for Kurmanji (kmr, kmr-*)	×	×	✓8	×	×	×	✓8	×	×	×	×	×
Hyphenation dictionary for Latin (la, la-*)	✓87	✓87	✓8	✓73	×	✓87	✓8	✓62	×	✓14.0	✓87	×
Hyphenation dictionary for Latvian (lv, lv-*)	✓112	✓112	×	✓98	×	✓112	×	✓75	×	✓23.0	✓112	×
Hyphenation dictionary for Lithuanian (lt, lt-*)	✓112	✓112	✓8	✓98	×	✓112	✓8	✓75	×	✓23.0	✓112	×
Hyphenation dictionary for Malayalam (ml, ml-*)	✓87	✓87	×	✓73	×	✓87	×	✓62	×	✓14.0	✓87	×
Hyphenation dictionary for Marathi (mr, mr-*)	✓87	✓87	×	✓73	×	✓87	×	✓62	×	✓14.0	✓87	×
Hyphenation dictionary for Modern Greek (el, el-*)	✓112	✓112	×	✓98	×	✓112	×	✓75	×	✓23.0	✓112	×
Hyphenation dictionary for Mongolian (mn, mn-*)	×	×	✓8	×	×	×	✓8	×	×	×	×	×
Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*)	✓87	✓87	✓8	✓73	×	✓87	✓8	✓62	✓5	✓14.0	✓87	✓5
Hyphenation dictionary for Norwegian (Bokmål) (no, no-, nb, nb-)	✓87	✓87	✓8	✓73	✓5.1	✓87	✓8	✓62	✓5	✓14.0	✓87	✓5
Hyphenation dictionary for Old Slavonic (cu, cu-*)	✓87	✓87	×	✓73	×	✓87	×	✓62	×	✓14.0	✓87	×
Hyphenation dictionary for Oriya (or, or-*)	✓87	✓87	×	✓73	×	✓87	×	✓62	×	✓14.0	✓87	×
Hyphenation dictionary for Polish (pl, pl-*)	×	×	✓31	×	✓9.1	×	✓31	×	✓9.3	×	×	✓9.3
Hyphenation dictionary for Portuguese (pt, pt-*)	✓87	✓87	✓8	✓73	✓9.1	✓87	✓8	✓62	✓9.3	✓14.0	✓87	✓9.3
Hyphenation dictionary for Punjabi/Panjabi (pa, pa-*)	✓87	✓87	×	✓73	×	✓87	×	✓62	×	✓14.0	✓87	×
Словарь русского языка	✓112	✓112	✓8	✓98	✓5.1	✓112	✓8	✓75	✓5	✓23.0	✓112	✓5
Hyphenation dictionary for Slovak (sk, sk-*)	✓112	✓112	✓130	✓98	×	✓112	✓130	✓75	×	✓23.0	✓112	×
Hyphenation dictionary for Slovenian (sl, sl-*)	✓87	✓87	✓8	✓73	×	✓87	✓8	✓62	×	✓14.0	✓87	×
Hyphenation dictionary for Spanish (es, es-*)	✓87	✓87	✓8	✓73	✓5.1	✓87	✓8	✓62	✓5	✓14.0	✓87	✓5
Hyphenation dictionary for Swedish (sv, sv-*)	✓112	✓112	✓8	✓98	✓5.1	✓112	✓8	✓75	✓5	✓23.0	✓112	✓5
Hyphenation dictionary for Tamil (ta, ta-*)	✓87	✓87	×	✓73	×	✓87	×	✓62	×	✓14.0	✓87	×
Hyphenation dictionary for Telugu (te, te-*)	✓87	✓87	×	✓73	×	✓87	×	✓62	×	✓14.0	✓87	×
Hyphenation dictionary for Turkish (tr, tr-*)	×	×	✓9	×	✓5.1	×	✓9	×	✓5	×	×	✓5
Hyphenation dictionary for Turkmen (tk, tk-*)	✓87	✓87	×	✓73	×	✓87	×	✓62	×	✓14.0	✓87	×
Hyphenation dictionary for Ukrainian (uk, uk-*)	✓112	✓112	✓9	✓98	✓9.1	✓112	✓9	✓75	✓9.3	✓23.0	✓112	✓9.3
Hyphenation dictionary for Upper Sorbian (hsb, hsb-*)	×	×	✓8	×	×	×	✓8	×	×	×	×	×
Hyphenation dictionary for Welsh (cy, cy-*)	✓87	✓87	✓8	✓73	×	✓87	✓8	✓62	×	✓14.0	✓87	×
`manual`	✓88	✓88	✓6	✓74	✓5.1	✓55	✓6	✓42	✓4.2	✓6.0	✓55	✓4.2
`none`	✓88	✓88	✓6	✓74	✓5.1	✓55	✓6	✓42	✓4.2	✓6.0	✓55	✓4.2
Словари других языков (61) Свернуть

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Автоматические переносы зависят от языка и словарей. В старых версиях Safari нужен -webkit-hyphens; в новых используйте стандартное свойство.

CSS синтаксис:

CSS

hyphens: none | manual | auto;

/* Глобальные значения */
hyphens: initial | inherit | unset | revert | revert-layer;

| разделяет варианты.

JavaScript синтаксис:

JavaScript

element.style.hyphens = "auto";

Начальное значение свойства

manual.

Значения свойства

Значения hyphens
Значение	Описание
`none`	Не разрешает перенос слова по точкам переноса, даже если в тексте есть мягкий перенос. Обычные переносы между словами остаются.
`manual`	Разрешает перенос в местах, явно отмеченных в тексте, например мягким переносом ``. Самостоятельно словарь не выбирает точки. Начальное значение.
`auto`	Разрешает автоматический выбор точек по языковым правилам, если у браузера есть нужный словарь. Явные подсказки в тексте также учитываются.
`initial`	Устанавливает начальное значение свойства.
`inherit`	Наследует вычисленное значение свойства у родительского элемента.
`unset`	Для наследуемого свойства `hyphens` наследует вычисленное значение у родительского элемента.
`revert`	Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
`revert-layer`	Сбрасывает значение свойства для текущего слоя каскада `@layer`. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Язык и словарь

Укажите язык разметки через lang, например <p lang="ru">. Одного кириллического текста недостаточно для надёжного выбора словаря. Точки переноса могут различаться между операционными системами и браузерами; наличие поддержки свойства не гарантирует наличие словаря для каждого языка.

Мягкий перенос  обычно не виден, пока слово не переносится в указанном месте. Обычный дефис — видимый символ текста, его не стоит вставлять вместо мягкого переноса. Для длинного URL или непрерывного идентификатора полезнее overflow-wrap: anywhere: это аварийное разбиение, а не языковой перенос слова. word-break: break-all может разбивать текст без ожидаемых дефисов.

Спецификация

CSS Text — hyphens.

Наследуется

Да.

Анимируемое

Тип анимации — дискретный: значение переключается без плавных промежуточных положений.

Примеры, попробуйте сами

Перенос длинного слова

Сузьте абзацы. Первый содержит явный мягкий перенос, второй использует русский словарь. Переключайте auto, manual и none; автоматический результат зависит от браузера.

base.css

CSS

body {
    margin: 1rem;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #243342;
    background: #fff;
}
* {
    box-sizing: border-box;
}
p {
    max-width: 12rem;
    border: 1px solid #64748b;
    padding: 8px;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Перенос длинного слова</title>
  </head>
  <body>
    <p class="manual" lang="ru">Электро&shy;станция находится за лесом.</p>
    <p class="automatic" lang="ru">Путешественники фотографировали достопримечательности заповедника.</p>
  </body>
</html>

style.css

CSS

.manual {
    hyphens: manual;
}
.automatic {
    hyphens: auto;
}