Разрыв строки

Базовая линия Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2020 года.

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

Попробовать

Синтаксис

/* 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: revert;
line-break: revert-layer;
line-break: unset;

Значения

auto: Разбивать текст с использованием стандартного правила разрыва строки.
loose: Разбивать текст с использованием наименее жёстких правил разрыва строки. Обычно используется для коротких строк, например, в газетах.
normal: Разбивать текст с использованием наиболее распространённых правил разрыва строки.
strict: Разбивать текст с использованием наиболее строгих правил разрыва строки.
anywhere: Возможен мягкий перенос строки вокруг каждого типографического знака, в том числе вокруг знаков препинания или сохраняемых пробелов, или в середине слов, игнорируя любые запреты на разрывы строк, даже те, которые введены символами класса GL, WJ или ZWJ или предписаны свойством word-break. Различные возможности переноса строки не должны иметь приоритета. Дефисное соединение не применяется.

Формальное определение

Начальное значение	`auto`
Применимо к	всем элементам
Наследуется	да
Вычисляемое значение	как указано
Тип анимации	дискретный

Формальный синтаксис

line-break = 
  auto      |
  loose     |
  normal    |
  strict    |
  anywhere

Примеры

Установка переноса текста

Проверьте, будет ли текст переноситься перед "々", "ぁ" и "。".

HTML

<div lang="ja">
  <p class="wrap-box auto">
    auto:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrap-box loose">
    loose:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrap-box normal">
    normal:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrap-box strict">
    strict:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrap-box anywhere">
    anywhere:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
</div>

CSS

.wrap-box {
  width: 10em;
  margin: 0.5em;
  white-space: normal;
  vertical-align: top;
  display: inline-block;
}
.auto {
  line-break: auto;
}
.loose {
  line-break: loose;
}
.normal {
  line-break: normal;
}
.strict {
  line-break: strict;
}
.anywhere {
  line-break: anywhere;
}

Результат

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

Спецификация
CSS Текстовый модуль уровень 3 # line-break-property

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`line-break`	581	14	69	4515	1132–3	5818	79	4314	111	7.01.0	584.4
`anywhere`	≤83	83	≤72	69	≤13.1	83	79	59	≤13.4	13.0	83
`auto`	≤83	83	≤72	69	≤13.1	83	79	59	≤13.4	13.0	83
`loose`	≤83	83	≤72	69	≤13.1	83	79	59	≤13.4	13.0	83
`normal`	1	79	≤72	15	2	18	79	14	1	1.0	4.4
`strict`	≤83	83	≤72	69	≤13.1	83	79	59	≤13.4	13.0	83

См. также

CSS и международный текст на W3C

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/line-break