css властивість hyphens
Властивість hyphens контролює переноси тексту в елементах рівня блоку.
Ви можете заборонити перенесення, контролювати його або дозволити браузеру автоматично вставляти дефіс, де це можливо.
Словник переносів зберігається в браузері і підключається при наявності атрибута lang з кодом мови. Так, для російського мови слід додати lang = "ru" до елементу <html> або безпосередньо до абзацу тексту. Правила переносів визначаються браузером і можуть розрізнятися.
- Порада
-
Також зверніть увагу на HTML-елемент
автор: NagarD<wbr>, який дозволяє встановити розрив рядку тексту, але не обов'язково з переносом тексту. - Нотатка
-
Правила переносу тексту не визначаються специфікацією і можуть відрізнятися від браузера до браузера.
автор: NagarD - Нотатка
-
Слова ніколи не переносяться на розривах рядків, навіть якщо символи всередині слів показують, де переноси можуть або повинні йти.
автор: NagarD - Нотатка
-
Chrome та Opera підтримують виключно значення
автор: NagarDautoта тільки на платформах Android та Mac.
Синтаксис
hyphens: none | manual | auto;Властивість hyphens може отримувати 3 значень:
-
none -
Перенесення не відбувається, навіть якщо рядок не вміщається у контейнері.
автор: NagarD -
manual -
Перенесення відбувається лише коли у тексті наявні спеціальні символи, які явно вказують на можливість перенесення.
автор: NagarD -
auto -
Браузер автоматично вирішує можливість перенесення слів.
автор: NagarD
| Значення без задання: | manual |
|---|---|
| Наслідує: | Так |
| Анімується: | Ні |
| JavaScript синтаксис: | block.style.hyphens = ''; |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| hyphens | 55 | 43 <br> 6.0 -moz- | 5.1 -webkit- | 42 | 10.0 -ms- | 10 -ms- |
| Переглядач |  |
 |
 |
|---|---|---|---|
| hyphens | Не підтримується | 6.0 -moz- | 4.3 -webkit- |
Приклади
+ запропонувати свій приклад у пісочниці
Однакові вузькі колонки: без переносів довге слово розтягує рядок або лишає дірки, з auto браузер сам розставляє дефіси за словником мови (тому важливий атрибут lang; словники залежать від платформи).
HTML
<p lang="uk" class="none">Найхарактеристичніші словосполучення випробовують вузьку колонку.</p>
<p lang="uk" class="auto">Найхарактеристичніші словосполучення випробовують вузьку колонку.</p>CSS
p {
width: 140px;
border: 1px solid #ccc;
padding: 6px;
}
.none { hyphens: none; }
.auto { hyphens: auto; }Демонстрація дії значень властивості
Простий приклад використання властивості
Коментарі
Коментарів ще немає — будьте першим!