Свойство hyphens определяет, как должен осуществляться перенос слов в тексте.
Свойство hyphens имеет три значения: none, manual, auto. С помощью этих значений можно избегать переноса или разрешать перенос, или же разрешать только при наличии некоторых символов.
Расстановка переносов работает только в случае, если указан атрибут span, так как переносы отражают специфику языка, и каждый язык имеет свои правила расстановки переноса.
Правила расстановки переноса не сформулированы однозначным образом в спецификации, поэтому расстановка переноса различается в зависимости от браузера.
Значение по умолчанию | manual |
Применяется | Ко всем элементам. |
Наследуется | Да |
Анимируемое | Нет |
Версия | CSS3 |
DOM синтаксис | Object.style.hyphens = "none"; |
Синтаксис
hyphens: none | manual | auto | initial | inherit;
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
p {
width: 55px;
border: 1px solid #666;
}
p.none {
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
p.manual {
-webkit-hyphens: manual;
-ms-hyphens: manual;
hyphens: manual;
}
p.auto {
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
</style>
</head>
<body>
<h2>Пример свойства hyphens</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">An extreme­ly lengthy sentence</p>
</body>
</html>
В вышеприведенном примере применены все три значения.
Для максимальной совместимости браузера могут быть использованы расширения, например, -webkit- для Safari.
Значения
Значение | Описание |
---|---|
none | Слова не переносятся даже при наличии точек прерывания строки.. |
manual | Слова разбиты только для переноса строк, когда имеется возможность разрыва строки внутри слова. Слова переносятся с помощью использования &hyphen или ­. Значение по умолчанию. |
auto | Браузер автоматически переносит слова в cоответствующих точках переноса. Алгоритм сам решает, где переносить слова. Реакция значения auto зависит от языка. |
initial | Устанавливает свойство в значение по умолчанию. |
inherit | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
55.0 partial | 12.0 -ms- |
43.0+ 6 - 42 -moz- |
5.1 -webkit- | 42.0 partial |
Практикуйте свои знания
Какие значения могут быть у CSS свойства 'hyphens'?
Правильный!
Неправильно!