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;
}
- Нотатка
-
автор: Svitlanaword-wrap- це альтернативна назваoverflow-wrap. Вони обидві роблять теж саме. - Нотатка
-
Відсотковий запис не застосовується.
автор: Svitlana
Синтаксис
overflow-wrap: normal | break-word | inherit | initial | unset;Властивість overflow-wrap може отримувати 5 значень:
-
normal -
Рядки тексту можуть розбитись лише там де розташовані звичайні точки розриву слова (наприклад, пробіл між двома словами).
автор: Svitlana -
break-word -
Щоб запобігти переповненню, нерозривні слова можуть бути перенесені в довільних точках, якщо в рядку відсутні іншим чином прийнятні точки переривання.
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання.
автор: Svitlana -
unset -
Комбінація ключових слів initial і inherit. Встановлює значення властивості як inherit, якщо властивість успадковується від свого батька, в іншому випадку значення встановлюється як initial.
автор: Svitlana
| Значення без задання: | normal |
|---|---|
| Наслідує: | Так |
| Анімується: | Ні |
| JavaScript синтаксис: | element.style.overflowWrap = ''; |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 23 | 49 | 7 | 12.1 | 18 | 5.5* |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 25 | 49 | 7 |
Приклади
+ запропонувати свій приклад у пісочниці
Слово довше за колонку: без переносу воно вилазить за рамку, а break-word дозволяє розірвати його в будь-якому місці.
HTML
<p class="no">Без переносу: Superkalifragilisticexpialidocious</p>
<p class="yes">З break-word: Superkalifragilisticexpialidocious</p>CSS
p {
width: 160px;
border: 1px solid #ccc;
padding: 6px;
}
.yes {
overflow-wrap: break-word;
}Приклад впливу різних значень на рядок тексту
Простий приклад використання властивості
Коментарі
Коментарів ще немає — будьте першим!