css властивість word-wrap
Властивість word-wrap, вказує, чи переносити довгі слова, котрі не влазять по ширині в заданій області.
На цьому прикладі ми бачимо два однакових рядки тексту. Якщо у першому, нерозривне слово виходить за межі контейнеру, у другому - слово переноситься.
Властивість word-wrap є альтернативним ім'ям для властивості overflow-wrap. Вона вказує, чи дійсно непорожні слова можуть бути перенесені, щоб запобігти переповненню, контейнера.
Якщо слово або інший рядок занадто не вміщаються в контейнері, властивість може бути використана для того, щоб змусити слово розбитись у довільній точці, якщо в рядку не існує іншим чином прийнятних точок переривання.
Властивість word-wrap має ефект, лише коли властивість white-space дозволяє обгортати рядки (це робиться за умовчанням).
| Нотатка: | На відміну від |
Синтаксис
word-wrap: normal|break-word|initial|inherit;Властивість word-wrap може отримувати 4 значення:
normalРядки не переносяться або переносяться в тих місцях, де явно задане перенесення. В цьому випадку можливий вихід слів за межі контейнера.
break-wordПеренесення рядків додається. Браузер самостійно визначить де перенести слово, щоб воно не вилізло за межі контейнера.
initialВстановлює властивість у значення без задання
inheritВказує на спадковість властивостей від свого батьківського елемента
| Значення без задання: | normal |
|---|---|
| Наслідує: | Так |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.wordWrap="break-word" |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| word-wrap | 1.0 |
5.5 |
3.5 |
1.0 |
10.5 |
12.0 |
| Переглядач | |||
|---|---|---|---|
| word-wrap | 1.0 |
4.0 |
1.0 |
Мобільних переглядачів ще не додано.
Приклади
Різні значення власивості
See the Pen OBbqje by css.in.ua (@css_in_ua) on CodePen.
Приклад використання
Дозволяє перенос довгих слів на наступний рядок
p.test {
word-wrap: break-word;
}