Ordbrytning - CSS-tricks | CSS Almanack 2025

Den word-breakegendom i CSS kan användas för att ändra när radbrytningar borde inträffa. Normalt kan radbrytningar i text bara förekomma i vissa utrymmen, som när det finns ett mellanslag eller ett bindestreck.

I exemplet nedan kan vi istället göra word-breakmellan bokstäverna:

p ( word-break: break-all; )

Om vi sedan ställer in bredden på texten till en em, kommer ordet att brytas med varje bokstav:

Se pennainställningstexten vertikalt med ordbrytning av CSS-Tricks (@ css-tricks) på CodePen.

Detta värde används ofta på platser med användargenererat innehåll så att långa strängar inte riskerar att bryta layouten. Ett mycket vanligt exempel är en lång kopia och inklistrad URL. Om webbadressen inte har bindestreck kan den sträcka sig bortom föräldrarutan och se dålig eller sämre ut och orsaka layoutproblem.

Se Pen Fixing-länkar med word-break av CSS-Tricks (@ css-tricks) på CodePen.

Värden

normal: använd standardreglerna för ordbrytning.
break-all: vilket ord / bokstav som helst kan gå vidare till nästa rad.
keep-all: för kinesiska, japanska och koreanska ord bryts inte. Annars är det samma som normal.

Den här egenskapen används också ofta i kombination med bindestreckegenskapen så att när pauser inträffar införs en hypen, enligt standarden i böcker.

Den fulla användningen, med nödvändiga leverantörsprefix, är:

 -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;

Att använda dessa egenskaper på universalväljaren kan vara användbart om du har en webbplats med mycket användargenererat innehåll. Även om rättvis varning kan det se konstigt ut på titlar och förformaterad text (

Relaterad

overflow-wrap
bindestreck
vitt utrymme
Hantering av långa ord och webbadresser

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.