overflow-wrap

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

Інтерактивний приклад використання

Випускники GoIT працюють у 210000000000000000000000000000000000000000000000+ ІТ компаній України, Європи та США

Синтаксис

overflow-wrap: normal | break-word | anywhere;

Значення

  • normal — це значення за замовчуванням. Текст буде розриватися лише в межах слів (якщо є пробіли або розриви). Довгі слова, що не вміщуються в контейнер, залишаться в одному рядку і можуть викликати горизонтальну прокрутку.
  • break-word — дозволяє розривати довгі слова, які не вміщуються в контейнері, на нові рядки. Якщо слово надто довге, воно буде розриватися всередині, щоб вміститися в межах блоку. Це запобігає горизонтальній прокрутці.
  • anywhere — дозволяє браузеру переносити слово в будь-якому місці, навіть якщо воно може вміститися без переносу.

Крім цих основних значень, у будь-якої CSS-властивості є службові значення:

  • inherit — наслідує значення від батьківського елемента;
  • initial — скидає до значення за замовчуванням;
  • unset — поводиться як inherit для властивостей, що наслідуються, і як initial для ненаслідуваних;
  • revert — скасовує стилі автора і повертає значення з таблиці стилів браузера чи користувача;
  • revert-layer — повертає значення з попереднього шару каскаду (@layer).

Додаткові моменти

  • overflow-wrap дозволяє забезпечити правильне оброблення довгих слів у контексті адаптивного дизайну, особливо коли потрібно забезпечити, щоб текст не виходив за межі контейнера, що може призвести до горизонтальної прокрутки або неправильного відображення.
  • Властивість overflow-wrap є більш сучасним і стандартним способом керування перенесенням слів у порівнянні з word-wrap. Обидві властивості виконують однакову функцію, але overflow-wrap є кращою для сумісності з новими стандартами CSS.
  • Використання break-word дуже корисне для контенту, який містить довгі рядки, такі як URL, хеш-коди або довгі слова, що можуть не вміститися в стандартному контейнері.
  • Властивість overflow-wrap застосовується до текстових елементів блочного типу, таких як параграфи, списки та інші елементи, які містять текст.
  • Властивість підтримується всіма сучасними браузерами.