Den overflow-wrapeiendom i CSS kan du angi at nettleseren kan bryte en tekstlinje inne i målrettet element på flere linjer i en ellers uknuselig sted. Dette bidrar til å unngå en uvanlig lang tekststreng som forårsaker layoutproblemer på grunn av overløp.
.example ( overflow-wrap: break-word; )Verdier
normal: Standaren. Nettleseren vil bryte linjer i henhold til normale regler for linjeskift. Ord eller ubrutte strenger vil ikke knekke, selv om de renner over beholderen.break-word: ord eller strenger av tegn som er for store til å passe inn i beholderen deres, vil brytes på et vilkårlig sted for å tvinge et linjeskift. Et bindestrektegn blir ikke satt inn, selv omhyphensegenskapen brukes.inherit: det målrettede elementet må arve verdien avoverflow-wrapeiendommen som er definert på den nærmeste forelderen.
Demoen nedenfor har en vippeknapp som lar deg bytte mellom normalog break-word.
Se Pen overflow-wrap / word-wrap demo av Louis Lazaris (@impressivewebs) på CodePen.
For å demonstrere problemet som overflow-wrapprøver å løse, bruker demoen et uvanlig langt ord inne i en relativt liten container. Når du slår break-wordpå, blir ordet ødelagt for å imøtekomme den lille mengden tilgjengelig plass, som om ordet var flere ord.
En streng med ikke-bryte mellomromstegn ( ) vil bli behandlet på samme måte og vil også bryte på et passende sted.
overflow-wraper nyttig når den brukes på elementer som inneholder umodert brukergenerert innhold (som kommentarseksjoner). Dette kan forhindre lange URL-er og andre ubrutte tekststrenger (f.eks. Hærverk) fra å bryte layoutet til en webside.
Likheter med word-breakeiendommen
overflow-wrapog word-breakoppfører seg veldig likt og kan brukes til å løse lignende problemer. Et grunnleggende sammendrag av forskjellen, som forklart i CSS-spesifikasjonen, er:
overflow-wrapbrukes vanligvis for å unngå problemer med lange strenger som forårsaker ødelagte oppsett på grunn av tekst som strømmer utenfor en container.word-breakangir muligheter for myke omslag mellom bokstaver som ofte er assosiert med språk som kinesisk, japansk og koreansk (CJK).
Etter å ha beskrevet eksempler på hvordan word-breakdu kan bruke i CJK-innhold, sier spesifikasjonen: “For å aktivere ytterligere pausemuligheter bare i tilfelle overløp, se overflow-wrap“.
Fra dette kan vi anta det som word-breaker best brukt med ikke-engelsk innhold som krever spesifikke ordbrytende regler, og som kan være ispedd engelsk innhold, mens det overflow-wrapbør brukes for å unngå ødelagte oppsett på grunn av lange strenger, uavhengig av hvilket språk som brukes .
Den historiske word-wrapeiendommen
overflow-wraper standardnavnet for forgjengeren, word-wrapeiendommen. word-wrapvar opprinnelig en egenutviklet eneste Internet Explorer-funksjon som til slutt ble støttet i alle nettlesere til tross for at den ikke var en standard.
word-wrapaksepterer de samme verdiene som overflow-wrapog oppfører seg på samme måte. I følge spesifikasjonen må nettlesere “behandle word-wrapsom et alternativt navn for overflow-wrapeiendommen, som om det var en stenografi av overflow-wrap“. Også alle brukeragenter er pålagt å støtte på word-wrapubestemt tid, av eldre årsaker.
Både overflow-wrapog word-wrapvil bestå CSS-validering så lenge validatoren er satt til å teste mot CSS3 eller høyere (for øyeblikket standard).
I slekt
- ordbrudd
- bindestreker
- hvit-plass
- Håndtering av lange ord og nettadresser
Mer informasjon
- Word-Wrap: En CSS3-egenskap som fungerer i alle nettlesere
- Overflow Wrapping på W3C
- Diskusjon om Stack Overflow on
word-breakvs.overflow-wrap
Nettleserstøtte
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 |
Den "delvise" støtten som er angitt ovenfor, skyldes at eldre nettlesere støtter, word-wrapmen ikke overflow-wrap. Bruk av begge kan sikre bakoverkompatibilitet.
Redaktørens utkast til W3C-spesifikasjonen inkluderer en ny verdi som kalles break-spacessekvenser med “bevarte” tegn i mellomrom. Det er ingen kjent nettleserstøtte for denne funksjonen, og den er ikke inkludert i arbeidsutkastversjonen av spesifikasjonen.