Свойство CSS `line-break`

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

Попробуйте

line-break: auto;

line-break: anywhere;

line-break: normal;

line-break: loose;

<section id="default-example">
  <p id="example-element">
    この喫茶店は、いつでもコーヒーの香りを漂わせています。<br />彼女はこの喫茶店で働いて、着々と実力をつけていきました。<br />今では知る人ぞ知る、名人です。
  </p>
</section>

#example-element {
  font-family: "Yu Gothic", "YuGothic", "Meiryo", "ＭＳ ゴシック", sans-serif;
  border: 2px dashed #999999;
  text-align: left;
  width: 240px;
  font-size: 16px;
}

Синтаксис

/* 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. Различным возможностям переноса не присваиваются приоритеты. Автоматическая расстановка переносов не применяется.

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

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

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 и международные тексты на сайте W3C