Дефисы

Правила разделения дефисами зависят от языка. В HTML язык определяется атрибутом lang, и браузеры будут разделять слова дефисами только в том случае, если этот атрибут присутствует и соответствующий словарь разделения дефисами доступен. В XML необходимо использовать атрибут xml:lang.

Если поддерживается, hyphenate-character может использоваться для указания альтернативного символа дефиса для использования в конце разбиваемой строки.

/* Keyword values */
hyphens: none;
hyphens: manual;
hyphens: auto;

/* Global values */
hyphens: inherit;
hyphens: initial;
hyphens: revert;
hyphens: revert-layer;
hyphens: unset;

Свойство hyphens задается как одно ключевое значение из списка ниже.

none

Слова не разбиваются на переносимые строки, даже если символы внутри слов предполагают точки разрыва строк. Строки будут переноситься только по пробелам.

manual

Значение по умолчанию. Слова разбиваются для переноса строк только в местах, где символы внутри слова предполагают возможность переноса строки. Подробности см. в разделе Предложение точек разрыва строк ниже.

auto

Браузер свободно автоматически разбивает слова в подходящих точках дефиса, следуя своим правилам. Однако, предложенные точки разрыва строк (см. Предложение точек разрыва строк ниже) переопределят выбор автоматических точек разрыва при их наличии.

Существует два символа Юникода, используемые для ручного указания потенциальных точек разрыва строк в тексте:

U+2010 (Дефис)

Символ «жёсткого» дефиса указывает на видимую возможность разрыва строки. Даже если строка фактически не разрывается в этом месте, дефис всё равно отображается.

U+00AD (Мягкий дефис)

Невидимый, «мягкий» дефис. Этот символ не отображается визуально; вместо этого он отмечает место, где браузер должен разбить слово, если необходимо разделение дефисами. В HTML используйте ­ для вставки мягкого дефиса.

hyphens = 
  none    |
  manual  |
  auto    

В этом примере используются три класса, каждый для конфигурации свойства hyphens.

HTML

<dl>
  <dt><code>none</code>: no hyphen; overflow if needed</dt>
  <dd lang="en" class="none">An extreme&shy;ly long English word</dd>
  <dt>
    <code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)
  </dt>
  <dd lang="en" class="manual">An extreme&shy;ly long English word</dd>
  <dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt>
  <dd lang="en" class="auto">An extreme&shy;ly long English word</dd>
</dl>

CSS

dd {
  width: 55px;
  border: 1px solid black;
}
dd.none {
  hyphens: none;
}
dd.manual {
  hyphens: manual;
}
dd.auto {
  hyphens: auto;
}

Результат

• content
• overflow-wrap (ранее word-wrap)
• word-break
• Руководство по переводу и разрыву текста