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

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
line-break	1.0	-	1.0	45.0	5.5

Мобільних переглядачів ще не додано.

Приклади

+ запропонувати свій приклад у пісочниці

<p lang="ja" class="loose">日本語のテキストは、句読点。の前後で行の折り返し方が変わります。</p>
<p lang="ja" class="strict">日本語のテキストは、句読点。の前後で行の折り返し方が変わります。</p>

p {
    width: 170px;
    border: 1px solid #ccc;
    padding: 6px;
}

.loose  { line-break: loose; }
.strict { line-break: strict; }