В overflow-wrapимота в CSS ви позволява да посочите, че браузърът може да се счупят ред от текста вътре в целенасочена елемент върху няколко реда в иначе нечуплив място. Това помага да се избегне необичайно дълъг низ от текст, причиняващ проблеми с оформлението поради препълване.
.example ( overflow-wrap: break-word; )Стойности
normal: по подразбиране. Браузърът ще прекъсва линии в съответствие с нормалните правила за прекъсване на редове. Думите или непрекъснатите низове няма да се счупят, дори ако преливат контейнера.break-word: думи или низове от символи, които са твърде големи, за да се поберат в контейнера им, ще се счупят на произволно място, за да принудят прекъсване на ред. Тирето няма да бъде вмъкнато, дори акоhyphensсе използва свойството.inherit: целевият елемент трябва да наследи стойността наoverflow-wrapсвойството, дефинирано в непосредствения родител.
Демото по-долу има бутон за превключване, който ви позволява да превключвате между normalи break-word.
Вижте демонстрацията на Pen over-wrap / word-wrap на Louis Lazaris (@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-breakсрещу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която се занимава с поредици от „запазени“ знаци за празно пространство. Няма известна поддръжка на браузъра за тази функция и тя не е включена в работната версия на спецификацията.