Met de overflow-wrapeigenschap in CSS kunt u specificeren dat de browser een regel tekst binnen het beoogde element op meerdere regels kan opsplitsen op een anders onbreekbare plaats. Dit helpt voorkomen dat een ongebruikelijk lange reeks tekst lay-outproblemen veroorzaakt door overloop.
.example ( overflow-wrap: break-word; )Waarden
normal: de standaard. De browser zal regels breken volgens de normale regels voor het breken van regels. Woorden of ononderbroken tekenreeksen zullen niet breken, zelfs niet als ze over de container lopen.break-word: woorden of tekenreeksen die te groot zijn om in hun container te passen, breken op een willekeurige plaats om een regeleinde te forceren. Er wordt geen koppelteken ingevoegd, zelfs niet als dehyphenseigenschap wordt gebruikt.inherit: het getargete element moet de waarde erven van deoverflow-wrapeigenschap die is gedefinieerd op zijn directe ouder.
De onderstaande demo heeft een schakelknop waarmee u kunt schakelen tussen normalen break-word.
Zie de demo Pen overflow-wrap / word-wrap van Louis Lazaris (@impressivewebs) op CodePen.
Om het probleem dat overflow-wrapprobeert op te lossen aan te tonen, gebruikt de demo een ongebruikelijk lang woord in een relatief kleine container. Wanneer u break-wordinschakelt, wordt het woord afgebroken om de kleine hoeveelheid beschikbare ruimte op te vangen, alsof het woord uit meerdere woorden bestaat.
Een reeks niet-afbrekende spaties ( ) zou op dezelfde manier worden behandeld en zou ook op een geschikte plek breken.
overflow-wrapis handig wanneer het wordt toegepast op elementen die ongemodereerde, door gebruikers gegenereerde inhoud bevatten (zoals commentaarsecties). Dit kan voorkomen dat lange URL's en andere ononderbroken tekstreeksen (bijv. Vandalisme) de lay-out van een webpagina breken.
Overeenkomsten met het word-breakonroerend goed
overflow-wrapen word-breakgedragen zich erg vergelijkbaar en kunnen worden gebruikt om soortgelijke problemen op te lossen. Een eenvoudige samenvatting van het verschil, zoals uitgelegd in de CSS-specificatie, is:
overflow-wrapwordt over het algemeen gebruikt om problemen met lange tekenreeksen te voorkomen, waardoor lay-outs worden verbroken doordat tekst buiten een container stroomt.word-breakspecificeert zachte omloopmogelijkheden tussen letters die gewoonlijk worden geassocieerd met talen zoals Chinees, Japans en Koreaans (CJK).
Na voorbeelden te hebben beschreven van hoe word-breakkan worden gebruikt in CJK-inhoud, zegt de specificatie: “Om extra pauzemogelijkheden alleen in het geval van overflow mogelijk te maken, zie overflow-wrap“.
Hieruit kunnen we aannemen dat deze het word-breakbeste kan worden gebruikt met niet-Engelse inhoud waarvoor specifieke woordafbrekende regels vereist zijn, en die kan worden afgewisseld met Engelse inhoud, terwijl deze overflow-wrapzou moeten worden gebruikt om onderbroken lay-outs vanwege lange strings te vermijden, ongeacht de gebruikte taal .
Het historische word-wrapbezit
overflow-wrapis de standaardnaam voor zijn voorganger, de word-wrapeigenschap. word-wrapwas oorspronkelijk een eigen Internet Explorer-functie die uiteindelijk in alle browsers werd ondersteund, ondanks dat het geen standaard was.
word-wrapaccepteert dezelfde waarden als overflow-wrapen gedraagt zich op dezelfde manier. Volgens de specificatie moeten browsers "behandelen word-wrapals een alternatieve naam voor de overflow-wrapeigenschap, alsof het een afkorting is van overflow-wrap". word-wrapOm legacy-redenen moeten alle user agents voor onbepaalde tijd ondersteuning bieden .
Beiden overflow-wrapen word-wrapzullen CSS-validatie doorstaan zolang de validator is ingesteld om te testen tegen CSS3 of hoger (momenteel de standaard).
Verwant
- woordonderbreking
- koppeltekens
- witte ruimte
- Omgaan met lange woorden en URL's
Meer informatie
- Word-Wrap: een CSS3-eigenschap die in elke browser werkt
- Overflow-wrapping op W3C
- Discussie over Stack Overflow op
word-breakvs.overflow-wrap
Browser-ondersteuning
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7.0-7.1 |
De hierboven aangegeven "gedeeltelijke" ondersteuning is te wijten aan ondersteuning door oudere browsers, word-wrapmaar niet overflow-wrap. Als u beide gebruikt, kunt u achterwaartse compatibiliteit garanderen.
De conceptversie van de W3C-specificatie van de redacteur bevat een nieuwe waarde break-spacesdie zich bezighoudt met reeksen "behouden" witruimtetekens. Er is geen bekende browserondersteuning voor deze functie en deze is niet opgenomen in de werkende conceptversie van de specificatie.