Властивість overflow-wrap

41

Від автора: властивість 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.

Свойство overflow-wrap

«Часткова» підтримка на сайті CanIUse викликана тим, що старі браузери підтримують старе властивість word-wrap, а не overflow-wrap. Використання обох властивостей забезпечить вам зворотну сумісність.

У редакторському чернетці специфікації W3C прописано нове значення break-spaces, яке працює з «зарезервоване» символами пробілу. Дане значення не підтримується ні в одному браузері і не прописано в робочому чернетці специфікації.