hyphens

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

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

Примечание: Правила, определяющие, как выполняется расстановка переносов, явно не определены в спецификации, поэтому точная расстановка переносов может варьироваться от браузера к браузеру.

Синтаксис

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

/* Global values */
hyphens: inherit;
hyphens: initial;
hyphens: unset;

Свойство hyphens задаётся как одно из ключевых значений, выбранного из списка ниже.

Значения

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

Примечание: Поведение параметра auto зависит от того, на каком языке применяются правила переноса. Вы должны указать язык с помощью HTML атрибута  lang, чтобы гарантировать, что на этом языке применяется автоматическая расстановка переносов.

Предлагаемые возможности разрыва строки

Для указания потенциальных точек разрыва строки в тексте вручную используются два символа Unicode:

U+2010 (HYPHEN)
«Жесткий» дефис указывает на возможность видимого разрыва строки. Даже если строка в этом месте не переносится, дефис все равно отображается.
U+00AD (SHY)
Невидимый «мягкий» перенос. Этот символ не отображается визуально, вместо этого он отмечает место, где браузер должен разорвать слово, если расстановка переносов необходима. В HTML, используйте ­ для вставки мягкого дефиса.

Когда HTML элемент <wbr> приводит к разрыву строки, дефис не добавляется.

Формальное определение

Начальное значениеmanual
Применяется квсе элементы
Наследуетсяда
Обработка значениякак указано
Animation typediscrete

Формальный синтаксис

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 {
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}
dd.manual {
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
}
dd.auto {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

Результат

Характеристики

Характеристика Статус Комментарий
CSS Text Module Level 3
Определение 'hyphens' в этой спецификации.
Кандидат в рекомендации Первоначальное определение

Совместимость с браузером

BCD tables only load in the browser

Смотрите также