overflow-wrapHotel v CSS vam omogoča, da določite, da lahko brskalnik prelomi vrstico besedila znotraj ciljnega elementa na več vrstic v sicer nezlomljiv mestu. To pomaga preprečiti nenavadno dolg niz besedila, ki povzroča težave z postavitvijo zaradi prelivanja.
.example ( overflow-wrap: break-word; )Vrednote
normal: privzeto. Brskalnik bo prekinil vrstice v skladu z običajnimi pravili preloma vrstic. Besede ali neprekinjeni nizi se ne bodo zlomili, tudi če prelivajo vsebnik.break-word: besede ali nizi znakov, ki so preveliki, da bi se prilegali njihovemu vsebniku, se bodo zlomili na poljubnem mestu, da bodo prelomili vrstico. Vezaj ne bo vstavljen, tudi če jehyphenslastnost uporabljena.inherit: ciljni element mora podedovati vrednostoverflow-wraplastnosti, definirane v neposrednem nadrejenem elementu
Spodnja predstavitev ima preklopni gumb, ki vam omogoča preklop med normalin break-word.
Oglejte si predstavitev Pen over-wrap / word-wrap, ki jo je napisal Louis Lazaris (@impressivewebs) na CodePen.
Za predstavitev težave, ki jo overflow-wrapskuša rešiti, predstavitev uporablja nenavadno dolgo besedo v razmeroma majhnem vsebniku. Ko break-wordvklopite, je beseda prekinjena, da ustreza majhnemu razpoložljivemu prostoru, kot da bi bila beseda več besed.
Niz neprekinjenih presledkov ( ) bi bil obravnavan na enak način in bi se prav tako prelomil na ustreznem mestu.
overflow-wrapje uporaben, kadar se uporablja za elemente, ki vsebujejo nemoderirano uporabniško ustvarjeno vsebino (na primer odseki komentarjev). To lahko prepreči, da bi dolgi URL-ji in drugi neprekinjeni nizi besedila (npr. Vandalizem) prekinili postavitev spletne strani.
Podobnosti z word-breaklastnino
overflow-wrapin se word-breakobnašajo zelo podobno in se lahko uporabljajo za reševanje podobnih problemov. Osnovni povzetek razlike, kot je pojasnjeno v specifikaciji CSS, je:
overflow-wrapse običajno uporablja za preprečevanje težav z dolgimi nizi, ki povzročajo pokvarjene postavitve zaradi besedila, ki teče zunaj vsebnika.word-breakdoloča možnosti mehkega zavijanja med črkami, ki so običajno povezane z jeziki, kot so kitajščina, japonščina in korejščina (CJK).
Po opisu primerov, kako word-breakjih je mogoče uporabiti v vsebini CJK, specifikacija pravi: "Če želite omogočiti dodatne priložnosti za odmor samo v primeru prelivanja, glejte overflow-wrap".
Iz tega lahko sklepamo, da word-breakse najbolje uporablja pri neangleški vsebini, ki zahteva posebna pravila, ki lomijo besedo, in ki je lahko vmešana v angleško vsebino, medtem ko jo overflow-wrapje treba uporabljati, da se izognemo zlomljenim postavitvam zaradi dolgih nizov, ne glede na jezik .
Zgodovinska word-wraplastnina
overflow-wrapje standardno ime za predhodnika, word-wraplastnost. word-wrapje bila prvotno lastniška funkcija samo za Internet Explorer, ki je bila sčasoma podprta v vseh brskalnikih, čeprav ni bila standardna.
word-wrapsprejema enake vrednosti overflow-wrapin se obnaša enako. V skladu s specifikacijo brskalniki "morajo lastnost obravnavati word-wrapkot nadomestno ime overflow-wrap, kot da gre za okrajšavo overflow-wrap". Prav tako morajo vsi uporabniški agenti word-wrapiz starih razlogov podpirati neomejeno dolgo.
Oba overflow-wrapin word-wrapbosta prestala preverjanje veljavnosti CSS, dokler je validacijski program nastavljen na preizkušanje glede na CSS3 ali novejšo različico (trenutno privzeto).
Sorodno
- prelom besed
- vezaji
- presledek
- Ravnanje z dolgimi besedami in URL-ji
Več informacij
- Oblikovanje besed: lastnost CSS3, ki deluje v vseh brskalnikih
- Prelivno zavijanje na W3C
- Razprava o Stack Overflow na
word-breakvs.overflow-wrap
Podpora za brskalnik
Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.
Namizje
| Chrome | Firefox | IE | Rob | Safari |
|---|---|---|---|---|
| 23. | 49 | 11. | 18. | 6.1 |
Mobilni / tablični računalnik
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 |
Zgoraj navedena "delna" podpora je posledica starejših brskalnikov, ki word-wrappa ne overflow-wrap. Uporaba obeh lahko zagotovi združljivost nazaj.
Urednikova osnutka različice specifikacije W3C vključuje novo vrednost, ki se imenuje break-spaceszaporedja "ohranjenih" presledkov. Za to funkcijo ni znane podpore brskalnika in ni vključena v delovno različico specifikacije.