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

Властивість word-wrap, вказує, чи переносити довгі слова, котрі не влазять по ширині в заданій області.

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

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

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

Властивість word-wrap має ефект, лише коли властивість white-space дозволяє обгортати рядки (це робиться за умовчанням).

правити

Нотатка

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

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

+ додати пораду чи нотатку

Синтаксис

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

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

normal

Рядки не переносяться або переносяться в тих місцях, де явно задане перенесення. В цьому випадку можливий вихід слів за межі контейнера.

автор: NagarD

правити

break-word

Перенесення рядків додається. Браузер самостійно визначить де перенести слово, щоб воно не вилізло за межі контейнера.

автор: NagarD

правити

initial

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

автор: NagarD

правити

inherit

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

автор: NagarD

правити

Переглядачі

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

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

Переглядач
word-wrap	1.0	3.5	1.0	10.5	12.0	5.5

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

Переглядач
word-wrap	1.0	4.0	1.0

Приклади

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

<p class="test">Superkalifragilisticexpialidocious ламається на межі блока.</p>
<p>Superkalifragilisticexpialidocious вилазить за рамку.</p>

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

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