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

правити

Переглядачі

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

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

Переглядач
word-break	44.0 <br> 1.0 -webkit-	15.0	9.0 <br> 3.1 -webkit-	31.0 <br> 15.0 -o-	12.0	5.5

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

Переглядач
word-break	2.1 -webkit-	15.0	9.2 <br> 3.2 -webkit-

Приклади

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

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

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

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