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

Свойство word-break CSS задаёт, должны ли переносы строк появляться везде, где текст иначе выходил бы за пределы своей области содержимого.

Попробуйте

word-break: normal;

word-break: break-all;

word-break: keep-all;

word-break: break-word;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    Honorificabilitudinitatibus califragilisticexpialidocious
    Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
    グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
  </div>
</section>

#example-element {
  width: 80%;
  padding: 20px;
  text-align: start;
  border: solid 1px darkgray;
}

Синтаксис

/* Keyword values */
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: auto-phrase; /* experimental */
word-break: break-word; /* deprecated */

/* Global values */
word-break: inherit;
word-break: initial;
word-break: revert;
word-break: revert-layer;
word-break: unset;

Для свойства word-break задаётся одно ключевое слово из списка значений ниже.

Значения

normal

Используется правило переноса строк по умолчанию.

break-all

Чтобы предотвратить переполнение, переносы слов должны вставляться между любыми двумя символами (за исключением китайского, японского и корейского текста).

keep-all

Для китайского, японского и корейского (CJK) текста переносы слов не используются. Для текста на других языках поведение такое же, как у normal.

auto-phrase

Действует так же, как word-break: normal, но с учётом анализа, специфичного для языка, чтобы улучшить переносы слов и не допускать их внутри естественных фраз.

break-word

Действует так же, как overflow-wrap: anywhere в сочетании с word-break: normal, независимо от фактического значения свойства overflow-wrap.

В спецификации также указано дополнительное значение manual, которое в настоящее время не поддерживается ни в одном браузере. После реализации manual будет действовать так же, как word-break: normal, но автоматические переносы не будут вставляться в языках Юго-Восточной Азии. Это необходимо, поскольку в таких языках пользовательские агенты часто размещают переносы в неоптимальных местах. manual позволит вручную вставлять переносы строк в оптимальных местах.

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

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

word-break = 
  normal |
  break-all |
  keep-all |
  break-word |
  auto-phrase

Примеры

HTML

<p>1. <code>word-break: normal</code></p>
<p class="normal narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>2. <code>word-break: break-all</code></p>
<p class="breakAll narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>3. <code>word-break: keep-all</code></p>
<p class="keepAll narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>4. <code>word-break: manual</code></p>
<p class="manual narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>5. <code>word-break: auto-phrase</code></p>
<p class="autoPhrase narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>6. <code>word-break: break-word</code></p>
<p class="breakWord narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

CSS

.narrow {
  padding: 10px;
  border: 1px solid;
  width: 500px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 1px;
}

.normal {
  word-break: normal;
}

.breakAll {
  word-break: break-all;
}

.keepAll {
  word-break: keep-all;
}

.manual {
  word-break: manual;
}

.autoPhrase {
  word-break: auto-phrase;
}

.breakWord {
  word-break: break-word;
}

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

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

См. также

• overflow-wrap
• white-space
• hyphens
• line-break
• Руководство по переносу и разбиению текста