overflow-wrapВластивість в CSS дозволяє вказати , що браузер може розірвати рядок тексту всередині цільового елемента на кілька рядків в іншому нерозривній місці. Це допомагає уникнути незвично довгого рядка тексту, що спричиняє проблеми з макетом через переповнення.
.example ( overflow-wrap: break-word; )Цінності
normal: за замовчуванням. Браузер ламає рядки відповідно до звичайних правил розбиття рядків. Слова або непорушені рядки не порвуться, навіть якщо вони переповнюють контейнер.break-word: слова або рядки символів, які занадто великі, щоб поміститися всередині їх контейнера, розірвуться у довільному місці, щоб змусити розбити рядок. Дефіс не буде вставлений, навіть якщо використовуєтьсяhyphensвластивість.inherit: цільовий елемент повинен успадкувати вартістьoverflow-wrapвластивості, визначеної для його безпосереднього батьківського елемента .
У демонстраційній частині нижче є кнопка перемикання, яка дозволяє перемикатися між normalта break-word.
Перегляньте демонстраційну демонстрацію переповнення / перенесення слова Pen від Луї Лазаріса (@impressivewebs) на CodePen.
Щоб продемонструвати проблему, яку 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спочатку була власною функцією лише Internet Explorer, яка врешті-решт підтримувалась у всіх браузерах, незважаючи на те, що не є стандартом.
word-wrapприймає ті самі значення, що overflow-wrapі поводиться однаково. Відповідно до специфікації, браузери «повинні розглядати word-wrapяк альтернативну назву overflow-wrapвластивості, ніби це скорочення overflow-wrap«. Крім того, усі користувацькі агенти повинні підтримувати word-wrapнеобмежений термін із застарілих причин.
І те, overflow-wrapі word-wrapінше пройдуть перевірку CSS, доки валідатор налаштовано на тестування щодо CSS3 або вище (на даний час за замовчуванням).
Пов’язані
- перерва слів
- дефіси
- пробіл
- Обробка довгих слів та URL-адрес
Більше інформації
- Перенесення слів: властивість CSS3, яка працює в кожному браузері
- Обтікання переповненням на W3C
- Обговорення щодо переповнення стека на
word-breakvs.overflow-wrap
Підтримка браузера
Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.
Робочий стіл
| Chrome | Firefox | IE | Край | Сафарі |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Мобільний / планшетний
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 |
«Часткова» підтримка, зазначена вище, пов’язана із підтримкою старих браузерів, word-wrapале ні overflow-wrap. Використання обох може забезпечити зворотну сумісність.
Проект редакції специфікації W3C редактора включає нове значення, яке називається break-spacesпослідовністю «збережених» пробілів. Немає відомої підтримки браузера для цієї функції, і вона не включена в робочу чернетку версії специфікації.