word-break

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

Синтаксис

/* Значения ключевых слов */
word-break: normal; 
word-break: break-all; 
word-break: keep-all;
word-break: break-word; /* не включено в стандарт */ 

/* Глобальные значения */
word-break: inherit;
word-break: initial;
word-break: unset;

Свойство word-break определяется одним из описанных ниже ключевых слов.

Значения

normal
Поведение по умолчанию для расстановки перевода строк.
break-all
При превышении границ блока, перевод строки будет вставлен между любыми двумя символами (за исключением текста на китайском/японском/корейском языке).
keep-all
Перевод строки не будет испольован в тексте на китайском/японском/корейском языке. Для текста на других языках будет применено поведение по умолчанию (normal).
break-word
При превышении границ блока, обычно остающиеся целыми слова, могут быть разбиты в произвольном месте, если не будет найдено более подходящее для переноса строки место.

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

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

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

CSS

.narrow {
  padding: 5px;
  border: 1px solid;
  display: table;
  max-width: 100%;
}

.normal {
  word-break: normal;
}

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

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

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

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

Specification Status Comment
CSS Text Module Level 3
Определение 'word-break' в этой спецификации.
Рабочий черновик Initial definition
Начальное значениеnormal
Применяется квсе элементы
Наследуетсяда
Отображениевизуальный
Обработка значениякак указано
Animation typediscrete
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Браузерная совместимость

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
word-breakChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 15IE Полная поддержка 5.5
Замечания
Полная поддержка 5.5
Замечания
Замечания No version of Internet Explorer supports the initial value.
Полная поддержка 8
С префиксом Замечания
С префиксом Требует вендорный префикс: -ms-
Замечания Don't use -ms-word-break, which is a synonym for word-break.
Opera Полная поддержка 15Safari Полная поддержка 3WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 15Opera Android Полная поддержка ДаSafari iOS Полная поддержка 2Samsung Internet Android Полная поддержка Да
break-wordChrome Полная поддержка 1Edge Нет поддержки НетFirefox Полная поддержка 67IE Нет поддержки НетOpera Полная поддержка 15Safari Полная поддержка 3WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 67Opera Android Полная поддержка 14Safari iOS Полная поддержка 2Samsung Internet Android Полная поддержка 1.0
keep-allChrome Полная поддержка 44Edge Полная поддержка 12Firefox Полная поддержка 15IE Полная поддержка 5.5Opera Полная поддержка 31Safari Полная поддержка 9WebView Android Полная поддержка 44Chrome Android Полная поддержка 44Firefox Android Полная поддержка 15Opera Android Полная поддержка 32Safari iOS Полная поддержка 9Samsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Смотрите замечания реализации.
Смотрите замечания реализации.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

See also