Den overflow-wrapejendom i CSS kan du angive, at browseren kan bryde en tekstlinje inde i målrettede element på flere linjer i en ellers ubrydelig sted. Dette hjælper med at undgå en usædvanlig lang tekststreng, der forårsager layoutproblemer på grund af overløb.
.example ( overflow-wrap: break-word; )Værdier
normal: standard. Browseren bryder linjer i henhold til normale regler for linjeskift. Ord eller ubrudte strenge går ikke i stykker, selvom de løber over containeren.break-word: ord eller strenge af tegn, der er for store til at passe inde i deres container, bryder et vilkårligt sted for at tvinge et linjeskift. Et bindestregtegn indsættes ikke, selvomhyphensejendommen bruges.inherit: det målrettede element skal arve værdien af denoverflow-wrapejendom, der er defineret på den nærmeste forælder.
Demoen nedenfor har en vippeknap, der giver dig mulighed for at skifte mellem normalog break-word.
Se Penoverløb-wrap / word-wrap demo af Louis Lazaris (@impressivewebs) på CodePen.
For at demonstrere det problem, der overflow-wrapforsøger at løse, bruger demoen et usædvanligt langt ord inde i en relativt lille container. Når du skifter break-wordtil, brydes ordet for at rumme den lille mængde ledig plads, som om ordet var flere ord.
En streng af ikke-brudende mellemrumstegn ( ) behandles på samme måde og brydes også på et passende sted.
overflow-wraper nyttigt, når det anvendes på elementer, der indeholder umodereret brugergenereret indhold (som kommentarsektioner). Dette kan forhindre lange webadresser og andre ubrudte tekststrenge (f.eks. Hærværk) i at bryde en websides layout.
Ligheder med word-breakejendommen
overflow-wrapog word-breakopfører sig meget ens og kan bruges til at løse lignende problemer. Et grundlæggende resumé af forskellen som forklaret i CSS-specifikationen er:
overflow-wrapbruges generelt til at undgå problemer med lange strenge, der forårsager ødelagte layouts på grund af tekst, der flyder uden for en container.word-breakangiver muligheder for soft wrap mellem bogstaver, der ofte er knyttet til sprog som kinesisk, japansk og koreansk (CJK).
Efter at have beskrevet eksempler på, hvordan word-breakman kan bruge i CJK-indhold, siger spec: "For at kun muliggøre yderligere pausemuligheder i tilfælde af overløb, se overflow-wrap".
Ud fra dette kan vi antage, at word-breakdet bedst bruges med ikke-engelsk indhold, der kræver specifikke ordbrydende regler, og som kan være blandet med engelsk indhold, mens det overflow-wrapskal bruges til at undgå brudte layout på grund af lange strenge, uanset hvilket sprog der bruges .
Den historiske word-wrapejendom
overflow-wraper standardnavnet for sin forgænger, word-wrapejendommen. word-wrapvar oprindeligt en proprietær eneste Internet Explorer-funktion, der til sidst blev understøttet i alle browsere på trods af at den ikke var en standard.
word-wrapaccepterer de samme værdier som overflow-wrapog opfører sig på samme måde. Ifølge specifikationen skal browsere “behandle word-wrapsom et alternativt navn for overflow-wrapejendommen, som om det var en stenografi af overflow-wrap“. Også alle brugeragenter er forpligtet til at støtte på word-wrapubestemt tid af ældre grunde.
Både overflow-wrapog word-wrapbestå CSS-validering, så længe validatoren er indstillet til at teste mod CSS3 eller højere (i øjeblikket standard).
Relaterede
- ordbrud
- bindestreger
- hvidt rum
- Håndtering af lange ord og webadresser
Mere information
- Word-Wrap: En CSS3-ejendom, der fungerer i enhver browser
- Indpakning af overløb på W3C
- Diskussion om Stack Overflow på
word-breakvs.overflow-wrap
Browsersupport
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 |
Den "delvise" support, der er angivet ovenfor, skyldes ældre browsere, der understøtter, word-wrapmen ikke overflow-wrap. Brug af begge kan sikre bagudkompatibilitet.
Editorens kladdeversion af W3C-specifikationen inkluderer en ny værdi kaldet, break-spacesder beskæftiger sig med sekvenser af “bevarede” hvide rumtegn. Der er ingen kendt browsersupport til denne funktion, og den er ikke inkluderet i arbejdsudkastversionen af specifikationen.