CSS word-break — правила розриву слів

CSS властивість word-break вказує тип перенесення слів, котрі не поміщаються по ширині в задану область. Ця властивість не працює з CJK.

Властивість word-break схожа на властивість word-wrap, оскільки вона може створювати перерви в межах слів, однак, різниця полягає в тому, що word-wrap розбиває слово лише на цілі частини (тобто якщо воно занадто довге, щоб влізти у контейнер), тоді як word-break дозволяє розбивати слова навіть тоді, коли вони могли б бути перенесеними до наступного рядка.

На відміну від overflow-wrap, word-break створить розрив в точному місці, де текст переповнює контейнер (навіть якщо повне слово може розміститися на наступному рядку і це зніме необхідність розриву).

правити

Загальний опис

правити

Нотатка

CJK (Chinese, Japanese та Korean) китайська, японська і корейська мови.

автор: Svitlana правити

Нотатка

Chrome до версії 44, Opera до версії 31, Safari до версії 9, Android і Opera Mobile не підтримують значення keep-all.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

word-break: normal|break-all|keep-all|initial|inherit;

Властивість word-break може отримувати 5 значень:

normal

Звичайні правила перенесення слів. Слова не переносяться або переносяться, тільки там, де явно задане перенесення. Це значення без задання.

автор: Svitlana

правити

break-all

Слово може перенестися між будь-якими двома літерами.

автор: Svitlana

правити

keep-all

Перенесення заборонені між буквами. Перенесення відбувається тільки між словами.

автор: Svitlana

правити

initial

Встановлює цю властивість в значення без задання

автор: Svitlana

правити

inherit

Успадкує значення властивості від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	15	3	15	12	5.5

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	15	2

Приклади

+ запропонувати свій приклад у пісочниці

<p class="test">Superkalifragilisticexpialidocious рубається будь-де.</p>
<p>Superkalifragilisticexpialidocious вилазить за рамку.</p>

p {
    width: 160px;
    border: 1px solid #ccc;
    padding: 6px;
}

p.test {
    word-break: break-all;
}

<p>Вибери потрібне значення для <code>word-break</code>:</p>
<div class="inputs">
  <input id="normal" checked name="word-break" type="radio"/>
  <label for="normal">normal</label>
  <message for="normal">Текст виводиться як зазвичай. За замовчуванням.</message>
  
  <input id="break-all" name="word-break" type="radio"/>
  <label for="break-all">break-all</label>
  <message for="break-all" for="break-all">Слово може перенестися між будь-якими двома літерами.</message>
  
  <input id="keep-all" name="word-break" type="radio"/> 
  <label for="keep-all">keep-all</label>
  <message for="keep-all">Перенесення заборонені між буквами. Перенесення відбувається тільки між словами.</message>
</div>

<p id="message">Звичайні правила перенесення слів. За замовчуванням.</p>

<hr>

<p id="block">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  text-align: center;
  font-family: monospace;
  font-size: 17px;
  line-height: 1.5;
  color: #222;
}

#form {
  padding: 8px 16px;
  font-size: 19px;
}

#block {
  width: 5em;
  background: gold;
  padding: 5px;
  font-size: 18px;
  color: #222;
  text-align: left;
}

#text {
  height: 60px;
  background-color: #eee;
  padding: 16px 0;
}

message {
  display: none; // Прибираємо відображення повідомлення
}

document.querySelectorAll('.inputs input').forEach((el) => el.addEventListener('change', function () {
  var messageText = document.querySelector("message[for='" + this.id + "']");
  document.querySelectorAll('#message').forEach((n) => n.textContent = messageText?.textContent ?? '');
}));

<p>overflow-wrap: break-word</p>
<div class="col ow">
    Звичайний український текст і посилання https://example.com/duzhe-dovga-adresa-bez-probiliv
</div>

<p>word-break: break-all</p>
<div class="col ba">
    Звичайний український текст і посилання https://example.com/duzhe-dovga-adresa-bez-probiliv
</div>

.col {
    width: 240px;
    margin-bottom: 20px;
    padding: 8px;
    border: 2px solid #666;
    background: #fbfbfb;
}

.ow {
    overflow-wrap: break-word;
    border-color: #398712;
}

.ba {
    word-break: break-all;
    border-color: #d24317;
}

<div>
  <code>Normal</code>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="word-break">
  <code>word-break</code>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="word-wrap">
  <code>word-wrap</code>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

div {
  width: 7em;
  background-color: #eee;
  color: #222;
  font-family: sans-serif;
  margin-right: 1.5em;
  float: left;
  padding: 6px;
  font-size: 19px;
}

code {
  text-align: center;
  display: block;
  color: #000;
}

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

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