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;
}

правити

Нотатка

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

автор: Svitlana правити

Нотатка

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

автор: 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

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
overflow-wrap	23.0	59.0	6.1	12.1	18.0	11.0

Підтримка: мобільні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

<p class="no">Без переносу: Superkalifragilisticexpialidocious</p>
<p class="yes">З break-word: Superkalifragilisticexpialidocious</p>

p {
    width: 160px;
    border: 1px solid #ccc;
    padding: 6px;
}

.yes {
    overflow-wrap: break-word;
}