css властивість word-break


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

CSS властивість `word-break`

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

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

Нотатка:

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

Нотатка:

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

Синтакс

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

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

normal

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

break-all

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

keep-all

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

initial

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

inherit

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

Значення без задання: normal
Наслідує: Так
Анімується: Ні
JavaScript синтаксис: object.style.wordBreak="break-all"

Переглядачі

Переглядач
word-break

44.0
1.0 -webkit-

5.5

15.0

9.0
3.1 -webkit-

31.0
15.0 -o-

12.0

Переглядач
word-break

2.1 -webkit-

15.0

9.2
3.2 -webkit-

Приклади


Різні значення властивості

See the Pen PKxaMW by Володимир (@NagarD) on CodePen.

Використання властивості

Синтаксис властивості

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

Додаткові посилання

Всі Коментарі (0)

Зареєструйся на сайті, аби мати змогу залишати коментарі. Зареєструватися  чи
Немає Коментарів