Разрыв строки - CSS-хитрости

Свойство CSS line-breakопределяет, насколько строго применять правила переноса текста на новые строки, особенно при работе с символами и пунктуацией в китайской, японской или корейской (CJK) системах письма. Он включен в спецификацию CSS Text Module 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`
Разрывы перед японской маленькой каной или продолженной звуковой меткой катакана-хирагана, т.е. символом из класса разрыва строки 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 + 2047,⁈ U + 2048,⁉ U + 2049,！ U + FF01,？ U + FF1F	❌	✅	❌
Перерывы перед суффиксами: персонажи с классом линии разрыва Unicode `PO`и свойство Восточной Азии Ширина `Ambiguous`, `Fullwidth`или `Wide`.	❌	✅	❌
Разрывы после префиксов: символы с классом разрыва строки Unicode `PR`и свойством ширины в Восточной Азии `Ambiguous`, `Fullwidth`или `Wide`.	❌	✅	❌