css властивість line-break
Властивість line-break використовується для визначення способи (або можливості) розбити рядки при роботі з пунктуацією та символами. Це впливає лише на текст китайською, японською чи корейською мовами (CJK).
Зокрема, переривання рядків визначає, як обгортатиметься вміст, якщо він містить пунктуацію та символи.
Правила переривання рядків залежать від використовуваної мови. Різні мови мають різні правила / конвенції, за яких може відбуватися переривання рядків. Наприклад, якщо мова китайська чи японська, розриви перед дефісом, дозволяється, якщо line-break має значення normal або loose, але не strict.
- Нотатка
-
Оскільки специфікація цієї технології ще не стабілізувалася, перевірте таблицю сумісності з браузерами.
Також зауважте, що синтаксис і поведінка цієї технології можуть змінюватися в майбутніх версіях браузерів, через можливу зміну специфікації.
автор: Svitlana
Синтаксис
line-break: auto | loose | normal | strict | initial | inherit | unset;Властивість line-break може отримувати 7 значень:
-
auto -
Браузер автоматично визначає переривання рядків.
автор: Svitlana -
loose -
Розбиває текст з найменш обмежувальним набором правил розбиття. Це корисно для тих випадків, коли область вмісту є особливо вузькою, наприклад, при відображенні її в багатоколонному макеті.
автор: Svitlana -
normal -
Розбиває текст, використовуючи найпоширеніший набір лінійних правил.
автор: Svitlana -
strict -
Розбиває текст, використовуючи найсуворіший набір лінійних правил.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання.
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента.
автор: Svitlana -
unset -
Комбінація ключових слів initial і inherit. Встановлює значення властивості як inherit, якщо властивість успадковується від свого батька, в іншому випадку значення встановлюється як initial.
автор: Svitlana
| Значення без задання: | auto |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | element.style.lineBreak = ''; |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 58 | 69 | 11 | 45 | 14 | 5.5 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 58 | 58 | 79 | 11 |
Приклади
+ запропонувати свій приклад у пісочниці
line-break регулює суворість правил переносу в східноазійських текстах — де можна розірвати рядок відносно розділових знаків. Тому демо японське (на українському тексті різниці немає): порівняй, де ламаються рядки у вузьких колонках.
HTML
<p lang="ja" class="loose">日本語のテキストは、句読点。の前後で行の折り返し方が変わります。</p>
<p lang="ja" class="strict">日本語のテキストは、句読点。の前後で行の折り返し方が変わります。</p>CSS
p {
width: 170px;
border: 1px solid #ccc;
padding: 6px;
}
.loose { line-break: loose; }
.strict { line-break: strict; }Динамічний приклад використання значень
Коментарі
Коментарів ще немає — будьте першим!