Woord-break - CSS-trucs | CSS Almanac 2025

De word-breakeigenschap in CSS kan worden gebruikt om te wijzigen wanneer regeleinden zouden moeten voorkomen. Normaal gesproken kunnen regeleinden in tekst alleen in bepaalde spaties voorkomen, bijvoorbeeld wanneer er een spatie of een koppelteken is.

In het onderstaande voorbeeld kunnen we in plaats daarvan de word-breaktussen letters maken:

p ( word-break: break-all; )

Als we vervolgens de breedte van de tekst op één zetten em, wordt het woord met elke letter afgebroken:

Zie de Pen Tekst verticaal instellen met woordafbreking door CSS-Tricks (@ css-tricks) op CodePen.

Deze waarde wordt vaak gebruikt op plaatsen met door gebruikers gegenereerde inhoud, zodat lange strings niet het risico lopen de lay-out te breken. Een veel voorkomend voorbeeld is een lange, gekopieerde en geplakte URL. Als die URL geen koppeltekens heeft, kan deze verder gaan dan het bovenliggende vak en er slecht uitzien of erger, lay-outproblemen veroorzaken.

Zie de Pen Fixing-links met woordafbreking door CSS-Tricks (@ css-tricks) op CodePen.

Waarden

normal: gebruik de standaardregels voor het afbreken van woorden.
break-all: elk woord / elke letter kan op de volgende regel worden afgebroken.
keep-all: voor Chinese, Japanse en Koreaanse tekst worden woorden niet onderbroken. Anders is dit hetzelfde als normal.

Deze eigenschap wordt ook vaak gebruikt in combinatie met de eigenschap koppeltekens, zodat bij onderbrekingen een koppelteken wordt ingevoegd, volgens de standaard in boeken.

Het volledige gebruik, met de benodigde leveranciersvoorvoegsels, is:

 -ms-word-break: break-all; word-break: break-all; /* Non standard for WebKit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;

Het gebruik van deze eigenschappen op de universele selector kan handig zijn als u een site heeft met veel door gebruikers gegenereerde inhoud. Hoewel een eerlijke waarschuwing, kan het er raar uitzien op titels en vooraf opgemaakte tekst (

Verwant

overloop-wrap
koppeltekens
witte ruimte
Omgaan met lange woorden en URL's

Browser-ondersteuning

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.