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 не підтримують значення
автор: Svitlanakeep-all.
Синтаксис
word-break: normal|break-all|keep-all|initial|inherit;Властивість word-break може отримувати 5 значень:
-
normal -
Звичайні правила перенесення слів. Слова не переносяться або переносяться, тільки там, де явно задане перенесення. Це значення без задання.
автор: Svitlana -
break-all -
Слово може перенестися між будь-якими двома літерами.
автор: Svitlana -
keep-all -
Перенесення заборонені між буквами. Перенесення відбувається тільки між словами.
автор: Svitlana -
initial -
Встановлює цю властивість в значення без задання
автор: Svitlana -
inherit -
Успадкує значення властивості від свого батьківського елемента
автор: Svitlana
| Значення без задання: | normal |
|---|---|
| Наслідує: | Так |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.wordBreak="break-all" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 15 | 3 | 15 | 12 | 5.5 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 15 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
З break-all довге слово рубається в будь-якому місці, аби заповнити рядок; без нього — вилазить за рамку вузького блока.
HTML
<p class="test">Superkalifragilisticexpialidocious рубається будь-де.</p>
<p>Superkalifragilisticexpialidocious вилазить за рамку.</p>CSS
p {
width: 160px;
border: 1px solid #ccc;
padding: 6px;
}
p.test {
word-break: break-all;
}Використання властивості
Коментарі
Коментарів ще немає — будьте першим!