word-break

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

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

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

Попробуйте

Синтаксис

/* 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). Поведение текста, не относящегося к CJK, такое же, как для normal.
auto-phrase: Оказывает такое же влияние, как word-break: normal за исключением того, что проводится языковой анализ для улучшения переносов слов, не вставляя их посередине естественных фрагментов.
break-word: Оказывает такое же влияние, как overflow-wrap: anywhere в сочетании с word-break: normal, независимо от фактического значения свойства overflow-wrap.

Примечание: В отличие от word-break: break-word и overflow-wrap: break-word (см. overflow-wrap), word-break: break-all создаст перенос в точном месте, где текст в противном случае выйдет за пределы контейнера (даже если размещение целого слова на отдельной строке устранило бы необходимость переноса).

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

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

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

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

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

Примеры

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;
}

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

Спецификация
CSS Text Module Level 3 # word-break-property

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

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`word-break`	1	12	15	15	3	18	15	14	2	1.0	4.4
`auto-phrase`	119 Это значение применимо только если указано `lang="ja"`. Это значение не влияет на другие языки.	119 Это значение применимо только если указано `lang="ja"`. Это значение не влияет на другие языки.	Нет	105 Это значение применимо только если указано `lang="ja"`. Это значение не влияет на другие языки.	Нет	119 Это значение применимо только если указано `lang="ja"`. Это значение не влияет на другие языки.	Нет	79 Это значение применимо только если указано `lang="ja"`. Это значение не влияет на другие языки.	Нет	25.0 Это значение применимо только если указано `lang="ja"`. Это значение не влияет на другие языки.	119 Это значение применимо только если указано `lang="ja"`. Это значение не влияет на другие языки.
`break-all`	1	12	15	15	3	18	15	14	2	1.0	4.4
`break-word`	1	12	67	15	3	18	67	14	2	1.0	4.4
`keep-all`	44	12	15	31	9	44	15	32	9	4.0	44
`normal`	1	12	15	15	3	18	15	14	2	1.0	4.4

См. также

© 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/word-break