Den overflow-wrapegendom i CSS kan du ange att webbläsaren kan bryta en textrad innanför riktade elementet på flera rader i en annars okrossbar plats. Detta hjälper till att undvika en ovanligt lång textsträng som orsakar layoutproblem på grund av överflöd.
.example ( overflow-wrap: break-word; )Värden
normal: standarden. Webbläsaren bryter linjer enligt normala regler för linjebrytande. Ord eller obrutna strängar går inte sönder, även om de rinner över behållaren.break-word: ord eller strängar av tecken som är för stora för att passa inuti behållaren kommer att gå sönder på en godtycklig plats för att tvinga en radbrytning. En bindestreck kommer inte att infogas, även omhyphensegenskapen används.inherit: det riktade elementet måste ärva värdet påoverflow-wrapegenskapen som definieras av dess omedelbara förälder.
Demonstrationen nedan har en växlingsknapp som låter dig växla mellan normaloch break-word.
Se Pennaöverflödes- / ordförpackningsdemo av Louis Lazaris (@impressivewebs) på CodePen.
För att demonstrera problemet som overflow-wrapförsöker lösa använder demo ett ovanligt långt ord i en relativt liten behållare. När du växlar break-wordpå bryts ordet för att rymma den lilla mängden tillgängligt utrymme, som om ordet var flera ord.
En rad icke-brytande mellanslagstecken ( ) skulle behandlas på samma sätt och skulle också brytas på en lämplig plats.
overflow-wrapär användbart när det används på element som innehåller omoderat användargenererat innehåll (som kommentarer). Detta kan förhindra att långa webbadresser och andra obrutna textsträngar (t.ex. vandalism) bryter en webbsides layout.
Likheter med word-breakfastigheten
overflow-wrapoch word-breakbeter sig mycket likartat och kan användas för att lösa liknande problem. En grundläggande sammanfattning av skillnaden, som förklaras i CSS-specifikationen, är:
overflow-wrapanvänds vanligtvis för att undvika problem med långa strängar som orsakar trasiga layouter på grund av att text flyter utanför en behållare.word-breakanger mjuka omslagsmöjligheter mellan bokstäver som ofta är associerade med språk som kinesiska, japanska och koreanska (CJK).
Efter att ha beskrivit exempel på hur man word-breakkan använda i CJK-innehåll, säger specifikationen: "För att möjliggöra ytterligare avbrottsmöjligheter endast vid överflöd, se overflow-wrap".
Från detta kan vi anta att det word-breakär bäst att använda med icke-engelska innehåll som kräver specifika ordbrytande regler, och som kan vara blandat med engelska innehåll, samtidigt som det overflow-wrapbör användas för att undvika trasiga layouter på grund av långa strängar, oavsett vilket språk som används .
Den historiska word-wrapfastigheten
overflow-wrapär standardnamnet för sin föregångare, word-wrapfastigheten. word-wrapvar ursprungligen en egen Internet Explorer-funktion som så småningom fick stöd i alla webbläsare trots att den inte var en standard.
word-wrapaccepterar samma värden som overflow-wrapoch beter sig på samma sätt. Enligt specifikationen måste webbläsare ”behandla word-wrapsom ett alternativt namn för overflow-wrapfastigheten, som om det vore en förkortning av overflow-wrap”. Dessutom måste alla användaragenter stödja på word-wrapobestämd tid av äldre skäl.
Båda overflow-wrapoch word-wrapkommer att klara CSS-validering så länge som valideraren är inställd på att testa mot CSS3 eller högre (för närvarande standard).
Relaterad
- ordbrytning
- bindestreck
- vitt utrymme
- Hantering av långa ord och webbadresser
Mer information
- Word-Wrap: En CSS3-egenskap som fungerar i varje webbläsare
- Överflödesförpackning på W3C
- Diskussion om Stack Overflow på
word-breakvs.overflow-wrap
Webbläsarstöd
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Mobil / surfplatta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7,0-7,1 |
Det "partiella" stöd som anges ovan beror på att äldre webbläsare stöder word-wrapmen inte overflow-wrap. Att använda båda kan säkerställa bakåtkompatibilitet.
Redaktörens utkastversion av W3C-specifikationen innehåller ett nytt värde som kallas break-spacessekvenser av "bevarade" vita tecken. Det finns inget känt webbläsarstöd för den här funktionen och den ingår inte i arbetsutkastversionen av specifikationen.