Свойство CSS line-break
Свойство CSS line-break задаёт правила переноса строк в CJK-тексте. Описание, значения и примеры.
Свойство CSS line-break управляет тем, как происходят переносы строк в тексте на китайском, японском и корейском (CJK) языках, когда перенос приходится рядом со знаками препинания или символами. CJK-скрипты переносятся иначе, чем латинский текст: между словами нет пробелов, поэтому строка может переноситься практически в любом месте между символами. Ключевой вопрос — какие символы допустимо ставить в начало или конец строки. Определённые знаки препинания — например, малые кана (ぁ, ゃ), знаки итерации или закрывающие скобки — не должны оказываться в одиночестве в начале строки, и именно line-break определяет, насколько строго браузер соблюдает эти правила.
Данное свойство влияет только на CJK-текст. Для латиницы, кириллицы и других скриптов с разделением словами пробелами оно не даёт видимого эффекта; для них обычно используют word-break, overflow-wrap или hyphens.
Когда применять
Используйте line-break, когда вёрстка содержит CJK-контент и требуется точный контроль над местами переноса строк:
strict— для формальных или «печатных» макетов, где нужны самые строгие, консервативные правила переноса.normal/loose— для узких колонок (мобильные экраны, боковые панели), где перенос в большем числе мест предотвращает нежелательное переполнение.auto— браузер самостоятельно выбирает разумное значение по умолчанию. Именно это значение используется, если свойство не задано.
Если текст не является CJK, свойство не оказывает никакого полезного эффекта — смотрите связанные свойства выше.
| Начальное значение | auto |
|---|---|
| Применяется к | Всем элементам, но только к блочным контейнерам. |
| Наследуется | Да. |
| Анимируется | Нет. |
| Версия | CSS3 |
| DOM-синтаксис | object.style.lineBreak = "loose"; |
Синтаксис
Синтаксис свойства CSS line-break
line-break: auto | loose | normal | strict | anywhere | initial | inherit;Значение anywhere является более новым и указывает браузеру, что перенос допустим между любыми двумя типографскими символами, в том числе до и после знаков препинания — полезно в очень узких контейнерах фиксированной ширины. Поддержка anywhere в браузерах ограничена по сравнению с другими ключевыми словами, поэтому перед использованием следует проверить совместимость.
Примеры
Значение strict
При значении strict браузер применяет наиболее строгий набор правил переноса строк для CJK-текста, удерживая знаки препинания рядом с соседними символами.
<!DOCTYPE html>
<html>
<head>
<style>
.korean {
line-break: strict;
}
</style>
</head>
<body>
<h2>Line-break property example</h2>
<!--Be the change you want to see in the world.-->
<span class="korean">세상에서 보고싶은 변화가 있다면 당신 스스로 그 변화가 되어라.</span>
</body>
</html>Результат
Значение normal
При значении normal браузер использует наименее строгие правила переноса по умолчанию, поэтому тот же текст может переноситься в большем количестве мест. Это удобно, когда колонка узкая и значение strict приводило бы к переполнению.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-size: 16px;
line-height: 24px;
line-break: normal;
}
</style>
</head>
<body>
<h2>Line-break property example</h2>
<p>日本語のテキスト例です。行の折り返し位置を確認します。日本語のテキスト例です。行の折り返し位置を確認します。日本語のテキスト例です。行の折り返し位置を確認します。</p>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| auto | Переносит текст по правилам браузера по умолчанию. Это начальное значение свойства. |
| loose | Использует наименее строгие правила переноса строк. Часто применяется для коротких строк, например в колонках газетного стиля. |
| normal | Использует наиболее распространённые правила переноса строк. |
| strict | Использует самые строгие правила переноса строк, удерживая знаки препинания рядом с соседними символами. |
| anywhere | Перенос допустим между любыми двумя типографскими символами. Ограниченная поддержка браузерами. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Поддержка браузерами
Ключевые слова auto, loose, normal и strict поддерживаются во всех современных браузерах. Ключевое слово anywhere является более новым и пока поддерживается не везде, поэтому при его использовании стоит предусмотреть запасной вариант (например overflow-wrap: break-word).
Связанные свойства
word-break— управляет возможностью разрыва слов внутри, в том числе для CJK и других текстов.overflow-wrap— позволяет длинным неразрывным строкам переноситься для предотвращения переполнения.hyphens— добавляет расстановку переносов для языков, которые её используют.white-space— управляет обработкой пробельных символов и переносами строк в целом.