css властивість overflow-wrap
Властивість overflow-wrap визначає чи можуть довгі слова, які не поміщаються до батьківського контейнеру, переноситися на наступний рядок. Властивість може бути застосована для того, щоб змусити слово розбитись у довільній точці, якщо в рядку не існує іншим чином прийнятних точок переривання.
overflow-wrap має ефект лише тоді, коли властивість white-space дозволяє перенесення (без задання).
На відміну від word-break, overflow-wrap лише створить розрив, якщо ціле слово не може бути розміщене у рядку без переповнення.
На цьому прикладі ми бачимо два однакових рядки тексту. Якщо у першому, нерозривне слово виходить за межі контейнеру, у другому - слово переноситься:
Властивість word-wrap працює в багатьох старих браузерах, а overflow-wrap - тільки в нових. Тому, в даний час, вказувати доводиться обидві властивості, спочатку застарілу (для старих браузерів), а потім нову (для нових браузерів):
селектор {
word-wrap: break-word;
overflow-wrap: break-word;
}
| Нотатка: |
|
| Нотатка: | Відсотковий запис не застосовується. |
Синтаксис
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;
}