Від автора: властивість overflow-wrap дозволяє браузеру розривати рядок тексту в заданому елементі на кілька рядків в тому місці, де цього бути не повинно. Це допомагає уникнути такої проблеми, коли дуже довга рядок вилазить за межі макету.
.example {
overflow-wrap: break-word;
}
Значення
normal: значення за замовчуванням. Браузер розриває рядка за стандартними правилами розриву. Слова і нерозривні рядка не відокремлюються, навіть якщо вони виходять за межі контейнера.
break-word: слова чи рядки символів, які не вміщуються в контейнер, розриваються в довільному місці і частина символів переходить на новий рядок. Тире не вставляється, навіть якщо вказана властивість hyphens.
inherit: цільовий елемент успадковує значення властивості overflow-wrap від найближчого батьків.
У демо нижче є спеціальна кнопка перемикання між значеннями normal і break-word.
Для демонстрації тієї проблеми, яку покликане вирішити властивість overflow-wrap, в демо вище використовується дуже довге слово, укладену в маленький контейнер. При перемиканні на break-word слово розбивається так, щоб вміститися в невелике відведений простір, як якщо б це було кілька слів.
Рядок з нерозривних пробілів ( ) буде також розірвано у відповідному місці.
Властивість overflow-wrap зручно використовувати на елементах з непроверяемым контентом, який створюють користувачі (коментарі). Воно врятує ваш макет від довгих url’ов та інших нерозривних рядків тексту (наприклад, вандалізму).
Схожість зі властивість word-break
Властивості overflow-wrap і word-break дуже схожі, їх можна використовувати для вирішення одних і тих же проблем. Коротке узагальнення відмінностей, пояснених в специфікації CSS:
overflow-wrap в основному використовується для розриву довгих рядків, ламають макети, коли текст вилазить за межі контейнера;
word-break встановлює м’які способи розриву букв, в основному асоціюється з китайським, японським і корейським мовами (CJK).
Після прикладів використання властивості word-break в CJK контенті специфікація говорить: «якщо потрібно розірвати рядок тільки з-за того, що вона вилазить за межі контейнера, дивіться властивість overflow-wrap».
Тепер ми можемо припустити, що властивість word-break підходить для неанглійської контенту, в якому потрібні певні правила розриву слів. Ці правила можуть перемішуватися з англійським контентом. Властивість overflow-wrap необхідно використовувати для запобігання поломки макета з-за занадто довгих рядків, незалежно від мови.
Історія властивості word-wrap
Властивість overflow-wrap є нащадком властивості word-wrap. Властивість word-wrap спочатку було властивістю тільки для IE, але в кінцевому підсумку стало підтримуватися у всіх браузерах. Проте стандартом воно так і не стало.
Властивість word-wrap приймає ті ж значення, що і overflow-wrap, і веде себе точно так само. У специфікації говориться, що браузери «повинні розпізнавати word-wrap як альтернативне назва властивості overflow-wrap, як якщо б це була скорочена версія даної властивості». Також всі юзер агенти повинні постійно підтримувати властивість word-wrap для сумісності зі старими версіями.
Обидва властивості overflow-wrap і word-wrap проходять CSS валідацію при перевірці на CSS3 і вище (зараз за замовчуванням).
Підтримка в браузерах
Дані про підтримку взято з сайту Caniuse, де також сказано, що властивість перебуває у статусі W3C Working Draft.
«Часткова» підтримка на сайті CanIUse викликана тим, що старі браузери підтримують старе властивість word-wrap, а не overflow-wrap. Використання обох властивостей забезпечить вам зворотну сумісність.
У редакторському чернетці специфікації W3C прописано нове значення break-spaces, яке працює з «зарезервоване» символами пробілу. Дане значення не підтримується ні в одному браузері і не прописано в робочому чернетці специфікації.
