line-break

Свойство line-break используется для управления правилами переноса строк в иероглифическом письме (японский, китайский, корейский языки) с учётом пунктуации и различных символов.

Краткая информация

Значение по умолчанию auto
Наследуется Да
Применяется К тексту
Анимируется Нет

Синтаксис

line-break: auto | loose | normal | strict | anywhere
Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#

Значения

auto
Браузер применяет правила переноса текста в зависимости от длины строки.
loose
Применяет правила переноса, чтобы было как можно меньше разрывов строк. Обычно используется для коротких текстов, например, заголовков.
normal
Применяет типовые правила переноса текста на другую строку.
strict
Применяет самые строгие правила переноса текста. Обычно используется в ситуациях, где перенос строк должен быть минимальным.
anywhere
Разрешает перенос строк в любом месте, даже если это нарушает обычные правила переноса. Это значение полезно для ситуаций, когда текст должен быть перенесен на новую строку, независимо от его содержания.

Пример

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>line-break</title> <style> .logic-block { padding: 1rem; /* Расстояние от текста до края */ margin: 0.5rem; /* Расстояние вокруг блока */ background-color: #e7e7e0; /* Цвет фона */ width: 200px; /* Ширина */ display: inline-block; /* Блоки выстраиваются рядом */ } .normal { line-break: normal; } .loose { line-break: loose; } .strict { line-break: strict; } .anywhere { line-break: anywhere; } </style> </head> <body> <div class="logic-block" lang="ja"> <h2>normal</h2> <p class="normal">サイタマは漫画『ワンパンマン』に登場する強力なヒーローである。 どんな相手でも一撃で倒せる能力で知られている。 サイタマは驚異的な強さにもかかわらず、退屈しがちで、 ふさわしい相手が見つからないからだ。</p> </div> <div class="logic-block" lang="ja"> <h2>loose</h2> <p class="loose">サイタマは漫画『ワンパンマン』に登場する強力なヒーローである。 どんな相手でも一撃で倒せる能力で知られている。 サイタマは驚異的な強さにもかかわらず、退屈しがちで、 ふさわしい相手が見つからないからだ。</p> </div> <div class="logic-block" lang="ja"> <h2>strict</h2> <p class="strict">サイタマは漫画『ワンパンマン』に登場する強力なヒーローである。 どんな相手でも一撃で倒せる能力で知られている。 サイタマは驚異的な強さにもかかわらず、退屈しがちで、 ふさわしい相手が見つからないからだ。</p> </div> <div class="logic-block" lang="ja"> <h2>anywhere</h2> <p class="anywhere">サイタマは漫画『ワンパンマン』に登場する強力なヒーローである。 どんな相手でも一撃で倒せる能力で知られている。 サイタマは驚異的な強さにもかかわらず、退屈しがちで、 ふさわしい相手が見つからないからだ。</p> </div> </body> </html>

Объектная модель

Объект.style.lineBreak

Примечание

Chrome до версии 58, Safari до версии 11, Opera до версии 45 поддерживают свойство -webkit-line-break.

Спецификация

Браузеры

6 14 58 45 11 69
58 79 43 11

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.
Текст и шрифт