Розрив рядка - CSS-хитрощі

line-breakВластивість CSS визначає, наскільки суворо застосовувати правила обтікання переносу тексту в нові рядки, особливо під час роботи із символами та розділовими знаками в китайських, японських чи корейських (CJK) системах письма. Він включений до специфікації текстового модуля CSS рівня 3, яка наразі знаходиться у чернетці редактора.

.element ( line-break: strict; )

Демо

Синтаксис

line-break: auto | loose | normal | strict | anywhere;

Початковий: auto
Застосовується до: усіх елементів
Успадковано: так
Обчислене значення: як вказано
Тип анімації: дискретна

Цінності

/* Keyword values */ line-break: auto; line-break: loose; line-break: normal; line-break: strict; line-break: anywhere; /* Global values */ line-break: inherit; line-break: initial; line-break: unset;

auto: Це дозволяє браузеру вирішити, як він реалізує розриви рядків. Кожен браузер може відрізнятися за своїми критеріями залежно від факторів, включаючи довжину рядка.
loose: Це найлегше застосування правил розриву рядків. Специфікація наводить короткі рядки тексту, подібні до тих, які ми можемо побачити в газеті, як приклад, коли це значення може бути використано.
normal: Це розбиває рядки тексту на основі "найпоширенішого" набору правил. (Зверніть увагу, що не передбачено визначення того, що є найпоширенішим набором правил або що воно може містити.)
strict: Це забезпечує найсуворіший набір правил для розривів рядків.
anywhere: Це значення надає можливості м'якого переносу, які дозволяють розбивати текст із пробілами чи розділовими знаками замість однієї межі слова. Він ідеально підходить для мов, які можуть не використовувати пробіли та розділові знаки для розділення слів. Специфікація говорить, що CSS не визначає можливості м'якого переносу, і це значення розпізнає та використовує їх для застосування правил розбиття рядків. Специфікація описує поведінку переносу тексту, подібно до того, що ми зазвичай бачимо в терміналі.

Специфікація також зазначає, що anywhereзначення дозволяє збереженим пробілам у кінці рядка перейти до наступного рядка, коли використовується із white-spaceвластивістю, встановленою на break-spaces.

Ціннісна поведінка в різних мовах

Як ви можете собі уявити, різні мови мають різні уподобання щодо того, як текст розбивається на нові рядки. Не існує стандартизованої конвенції, якою б користувались усі мови. Це залишає за браузерами можливість з’ясувати і дотримуватися “правильних” правил для певної мови. Але специфікація окреслює кілька вимог для визначення того, чи дозволено розрив лінії на різних рівнях line-breakсуворості в певних ситуаціях. Ми представимо їх тут.

Ситуація	`normal`	`loose`	`strict`
Перерви перед японським малим кана або катакана-хірагана тривалим звуковим знаком, тобто символом класу ломки лінії Unicode `CJ`	❌	✅	✅
Розриви перед певними дефісовими символами CJK: 〜 U + 301C, ゠ U + 30A0	❌	✅ якщо система письма китайська або японська	Дозволено, якщо система письма китайська або японська
Розриви перед певними дефісовими символами CJK: 〜 U + 301C, ゠ U + 30A0	❌	✅ якщо попередній символ належить до класу розбиття рядків Unicode `ID`(зокрема, коли попередній символ розглядається як `ID`належний до`word-break: break-all)`	❌
Перерви перед ітераційними позначками: 々 U + 3005, 〻 U + 303B, ゝ U + 309D, ゞ U + 309E, ヽ U + 30FD, ヾ U + 30FE	❌	✅	❌
Розриви між нероздільними символами (наприклад, ‥ U + 2025, ... U + 2026), тобто символами класу розбиття рядків Unicode `IN`	❌	✅	❌
Розриви перед певними розділеними розділовими знаками: ・ U + 30FB, ： U + FF1A, ； U + FF1B, ･ U + FF65,‼ U + 203C, U U + 2047,⁈ U + 2048,⁉ U + 2049,！ U + FF01,？ U + FF1F	❌	✅	❌
Перерви перед суфіксами: персонажі з класом лінії розриву Unicode `PO`і властивість Східної Азії Ширина `Ambiguous`, `Fullwidth`або `Wide`.	❌	✅	❌
Перерви після префіксів: персонажі з класом лінії розриву Unicode `PR`і властивість Східної Азії Ширина `Ambiguous`, `Fullwidth`або `Wide`.	❌	✅	❌