css властивість overflow-wrap


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

overflow-wrap має ефект лише тоді, коли властивість white-space дозволяє перенесення (без задання).

На відміну від word-break, overflow-wrap лише створить розрив, якщо ціле слово не може бути розміщене у рядку без переповнення.

На цьому прикладі ми бачимо два однакових рядки тексту. Якщо у першому, нерозривне слово виходить за межі контейнеру, у другому - слово переноситься:

Властивість `overflow-wrap`

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

селектор {
	word-wrap: break-word;
	overflow-wrap: break-word;
}
Нотатка:

word-wrap - це альтернативна назва overflow-wrap. Вони обидві роблять теж саме.

Нотатка:

Відсотковий запис не застосовується.

Синтакс

overflow-wrap: normal | break-word | inherit | initial | unset;

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

normal

Рядки тексту можуть розбитись лише там де розташовані звичайні точки розриву слова (наприклад, пробіл між двома словами).

break-word

Щоб запобігти переповненню, нерозривні слова можуть бути перенесені в довільних точках, якщо в рядку відсутні іншим чином прийнятні точки переривання.

inherit

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

initial

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

unset

Комбінація ключових слів initial і inherit. Встановлює значення властивості як inherit, якщо властивість успадковується від свого батька, в іншому випадку значення встановлюється як initial.

Значення без задання: normal
Наслідує: Так
Анімується: Ні
JavaScript синтаксис: element.style.overflowWrap = '';

Переглядачі

Переглядач
overflow-wrap

23.0

11.0

59.0

6.1

12.1

18.0

Переглядач
overflow-wrap

4.4

62.0

7.0

Приклади


Приклад впливу різних значень на рядок тексту

Простий приклад використання властивості

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

p {
  overflow-wrap: break-word;
}

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

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

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