hyphens
CSS свойство hyphens
указывает, как следует переносить слова через дефис, когда текст переносится на несколько строк. Оно может полностью запретить перенос, делать перенос в местах, заданных вручную или позволять браузеру автоматически расставлять переносы, где это необходимо.
Интерактивный пример
Правила расстановки переносов зависят от языка. В HTML язык определяется атрибутом lang
, и браузеры применяют правила переноса только при присутствии данного атрибута и доступности соответствующего словаря для расстановки переносов. В XML необходимо использовать атрибут xml:lang
(en-US).
Примечание: Правила, определяющие, как выполняется расстановка переносов, явно не определены в спецификации, поэтому точная расстановка переносов может варьироваться от браузера к браузеру.
Синтаксис
/* 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 type | discrete |
Формальный синтаксис
Примеры
Указание переносов текста
В этом примере используются три класса, по одному для каждой возможной конфигурации свойства hyphens
.
HTML
<dl>
<dt><code>none</code>: no hyphen; overflow if needed</dt>
<dd lang="en" class="none">An extreme­ly long English word</dd>
<dt>
<code>manual</code>: hyphen only at &hyphen; or &shy; (if needed)
</dt>
<dd lang="en" class="manual">An extreme­ly long English word</dd>
<dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt>
<dd lang="en" class="auto">An extreme­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;
}
Результат
Характеристики
Specification |
---|
CSS Text Module Level 3 # hyphens-property |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
content
overflow-wrap
(formerlyword-wrap
)word-break