overflow-wrapNekretnina u CSS vam omogućuje da odredite koji preglednik može slomiti jedan redak teksta unutar ciljanog elementa na više linija u inače neraskidivu mjestu. To pomaže u izbjegavanju neobično dugog niza teksta koji uzrokuje probleme s izgledom zbog prelijevanja.
.example ( overflow-wrap: break-word; )Vrijednosti
normal: zadani. Preglednik će prekidati retke u skladu s normalnim pravilima prekida reda. Riječi ili neprekinuti nizovi neće se slomiti, čak i ako preplave spremnik.break-word: riječi ili nizovi znakova koji su preveliki da bi stali u njihov spremnik prekinut će se na proizvoljnom mjestu radi prisiljavanja na prekid retka. Crtica neće biti umetnuta, čak i akohyphensse koristi svojstvo.inherit: ciljani element mora naslijediti vrijednostoverflow-wrapsvojstva definiranu na njegovom neposrednom roditelju.
Demo u nastavku ima gumb za prebacivanje koji vam omogućuje prebacivanje između normali break-word.
Pogledajte demo Pen overflow-wrap / word-wrap koji je napisao Louis Lazaris (@impressivewebs) na CodePenu.
Da bi demonstrirao problem koji overflow-wrappokušava riješiti, demonstracija koristi neobično dugu riječ u relativno malom spremniku. Kad uključite break-word, riječ je slomljena kako bi prilagodila malu količinu dostupnog prostora, kao da je riječ o više riječi.
Niz nerazbijajućih razmaka ( ) tretirao bi se na isti način i također bi se prelomio na odgovarajućem mjestu.
overflow-wrapje korisno kada se primjenjuje na elemente koji sadrže nemoderirani korisnički generirani sadržaj (poput odjeljaka komentara). To može spriječiti duge URL-ove i druge neprekinute nizove teksta (npr. Vandalizam) da ne naruše izgled web stranice.
Sličnosti sa word-breaksvojstvom
overflow-wrapi word-breakponašaju se vrlo slično i mogu se koristiti za rješavanje sličnih problema. Osnovni sažetak razlike, kako je objašnjeno u CSS specifikaciji je:
overflow-wrapobično se koristi za izbjegavanje problema s dugim nizovima koji uzrokuju pokvarene izglede zbog teksta koji teče izvan spremnika.word-breakodređuje mogućnosti mekog umotavanja između slova koja se obično povezuju s jezicima poput kineskog, japanskog i korejskog (CJK).
Nakon opisa primjera kako word-breakse može koristiti u sadržaju CJK, specifikacija kaže: "Da biste omogućili dodatne mogućnosti prekida samo u slučaju prelijevanja, pogledajte overflow-wrap".
Iz toga možemo pretpostaviti da word-breakse najbolje koristi s neengleskim sadržajem koji zahtijeva posebna pravila za razbijanje riječi i koji bi mogao biti prošaran engleskim sadržajem, dok overflow-wrapbi se trebao koristiti za izbjegavanje pokvarenih izgleda zbog dugih nizova, bez obzira na jezik koji se koristi .
Povijesni word-wrapnekretnine
overflow-wrapje standardni naziv za svog prethodnika, word-wrapsvojstvo. word-wrapje izvorno bila zaštićena značajka samo za Internet Explorer koja je na kraju podržana u svim preglednicima, iako nije bila standard.
word-wrapprihvaća iste vrijednosti kao overflow-wrapi ponaša se na isti način. Prema specifikaciji, preglednici "moraju se ponašati word-wrapkao zamjenski naziv overflow-wrapsvojstva, kao da je to skraćenica od overflow-wrap". Također, svi korisnički agenti moraju podržavati na word-wrapneodređeno vrijeme, iz naslijeđenih razloga.
Oboje overflow-wrapi word-wrapproći će CSS provjeru valjanosti dok je validator postavljen za testiranje protiv CSS3 ili novije verzije (trenutno zadana vrijednost).
Povezano
- prekid riječi
- crtice
- bijeli prostor
- Rukovanje dugim riječima i URL-ovima
Više informacija
- Omotavanje riječi: CSS3 svojstvo koje radi u svakom pregledniku
- Omotavanje preljeva na W3C
- Rasprava o preljevu steka na
word-breakvs.overflow-wrap
Podrška preglednika
Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.
Radna površina
| Krom | Firefox | IE | Rub | Safari |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Mobitel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 |
Gore navedena "djelomična" podrška nastala je zbog podrške starijih preglednika, word-wrapali nije overflow-wrap. Korištenje oba može osigurati povratnu kompatibilnost.
Urednikova verzija nacrta specifikacije W3C uključuje novu vrijednost koja se naziva break-spacessekvencama "sačuvanih" praznih znakova. Ne postoji poznata podrška za preglednik za ovu značajku i ona nije uključena u radnu verziju specifikacije.