overflow-wrapProprietatea în CSS vă permite să specificați că browser - ul poate rupe o linie de text în interiorul elementului vizat pe mai multe linii într - un loc în alt mod incasabil. Acest lucru ajută la evitarea unui șir neobișnuit de lung de text care provoacă probleme de aspect din cauza revărsării.
.example ( overflow-wrap: break-word; )Valori
normal: implicit. Browserul va sparge liniile conform regulilor normale de rupere a liniilor. Cuvintele sau șirurile neîntrerupte nu se vor sparge, chiar dacă vor revărsa containerul.break-word: cuvintele sau șirurile de caractere care sunt prea mari pentru a se potrivi în containerul lor se vor sparge într-un loc arbitrar pentru a forța o rupere de linie. Un caracter cu cratimă nu va fi inserat, chiar dacăhyphensproprietatea este utilizată.inherit: elementul vizat trebuie să moștenească valoareaoverflow-wrapproprietății definită de părintele său imediat.
Demo-ul de mai jos are un buton de comutare care vă permite să comutați între normalși break-word.
Vedeți demonstrația Overflow-wrap / word-wrap de Louis Lazaris (@impressivewebs) pe CodePen.
Pentru a demonstra problema pe care overflow-wrapîncearcă să o rezolve, demo-ul folosește un cuvânt neobișnuit de lung într-un container relativ mic. Când comutați break-word, cuvântul este rupt pentru a găzdui cantitatea mică de spațiu disponibil, ca și cum cuvântul ar fi mai multe cuvinte.
Un șir de caractere spațiale care nu se întrerup ( ) ar fi tratat la fel și s-ar rupe, de asemenea, la un loc adecvat.
overflow-wrapeste util atunci când se aplică elementelor care conțin conținut generat de utilizator nemodificat (cum ar fi secțiunile de comentarii). Acest lucru poate împiedica adresele URL lungi și alte șiruri de text neîntrerupte (de exemplu, vandalism) să rupă aspectul unei pagini web.
Asemănări cu word-breakproprietatea
overflow-wrapși word-breakse comportă foarte similar și pot fi folosite pentru a rezolva probleme similare. Un rezumat de bază al diferenței, așa cum se explică în specificația CSS este:
overflow-wrapeste utilizat în general pentru a evita problemele cu șiruri lungi care provoacă structuri rupte din cauza textului care curge în afara containerului.word-breakspecifică oportunități de împachetare ușoară între litere asociate în mod obișnuit cu limbi precum chineza, japoneza și coreeana (CJK).
După ce a descris exemple despre modul în care word-breakpoate fi utilizat în conținutul CJK, specificația spune: „Pentru a activa oportunități suplimentare de pauză numai în cazul depășirii, consultați overflow-wrap„.
Din aceasta, putem presupune că word-breakeste cel mai bine utilizat cu conținut non-englez, care necesită reguli specifice de rupere a cuvintelor și care ar putea fi intercalat cu conținut în limba engleză, în timp ce overflow-wrapar trebui utilizat pentru a evita aspectele rupte din cauza șirurilor lungi, indiferent de limba utilizată .
word-wrapProprietatea istorică
overflow-wrapeste numele standard pentru predecesorul său, word-wrapproprietatea. word-wrapa fost inițial o caracteristică exclusivă Internet Explorer, care a fost acceptată în cele din urmă în toate browserele, în ciuda faptului că nu este un standard.
word-wrapacceptă aceleași valori ca overflow-wrapși se comportă la fel. Conform specificațiilor, browserele „trebuie să trateze word-wrapca un nume alternativ pentru overflow-wrapproprietate, ca și cum ar fi o prescurtare a overflow-wrap„. De asemenea, toți agenții utilizator sunt obligați să sprijine word-wrappe termen nelimitat, din motive vechi.
Ambele overflow-wrapși word-wrapvor trece validarea CSS atâta timp cât validatorul este setat să testeze în funcție de CSS3 sau mai mare (în prezent implicit).
Legate de
- pauză de cuvinte
- cratime
- spatiu alb
- Gestionarea cuvintelor lungi și a adreselor URL
Mai multe informatii
- Word-Wrap: o proprietate CSS3 care funcționează în fiecare browser
- Împachetarea cu preaplin pe W3C
- Discuție despre Stack Overflow pe
word-breakvs.overflow-wrap
Suport pentru browser
Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.
Desktop
| Crom | Firefox | IE | Margine | Safari |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Mobil / Tabletă
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 4.4 | 7.0-7.1 |
Suportul „parțial” indicat mai sus se datorează browserelor mai vechi care acceptă, word-wrapdar nu overflow-wrap. Utilizarea ambelor poate asigura compatibilitatea înapoi.
Versiunea preliminară a editorului a specificației W3C include o nouă valoare numită break-spacescare tratează secvențe de caractere spațiale albe „conservate”. Nu există un suport de browser cunoscut pentru această caracteristică și nu este inclus în versiunea preliminară de lucru a specificației.