Прекъсване на реда - CSS-трикове

line-breakСвойството CSS определя колко стриктно да се прилагат правилата за опаковане на текстовото опаковане на нови редове, особено при работа със символи и пунктуации в китайски, японски или корейски (CJK) системи за писане. Той е включен в спецификацията на текстовия модул CSS Level 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`
Прекъсва преди японската малка кана или удължения звуков знак Katakana-Hiragana, т.е. знак от класа за разбиване на линии 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`.	❌	✅	❌