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


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

Властивість `word-wrap`

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

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

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

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

Нотатка:

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

Синтакс

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

Додаткові посилання

Всі Коментарі (0)

Зареєструйся на сайті, аби мати змогу залишати коментарі. Зареєструватися  чи
Немає Коментарів