Ordbrud - CSS-tricks

Anonim

Den word-breakejendom i CSS kan bruges til at ændre sig, når linjeskift burde forekomme. Normalt kan linjeskift i tekst kun forekomme i bestemte rum, som når der er et mellemrum eller en bindestreg.

I eksemplet nedenfor kan vi lave word-breakmellem bogstaverne i stedet:

p ( word-break: break-all; )

Hvis vi derefter indstiller bredden på teksten til en em, bryder ordet efter hvert bogstav:

Se teksten til penindstilling lodret med ordskift af CSS-Tricks (@ css-tricks) på CodePen.

Denne værdi bruges ofte steder med brugergenereret indhold, så lange strenge ikke risikerer at bryde layoutet. Et meget almindeligt eksempel er en lang kopi og indsat URL. Hvis denne URL ikke har bindestreger, kan den strække sig ud over den overordnede boks og se dårlig ud eller værre og forårsage layoutproblemer.

Se Pen Fixing-links med word-break fra CSS-Tricks (@ css-tricks) på CodePen.

Værdier

  • normal: Brug standardreglerne til at bryde ord.
  • break-all: ethvert ord / bogstav kan bryde videre til den næste linje.
  • keep-all: For kinesiske, japanske og koreanske tekst brydes ikke ord. Ellers er det det samme som normal.

Denne egenskab bruges også ofte sammen med bindestregeregenskaben, så når der opstår pauser, indsættes et hypen som pr.

Den fulde brug med nødvendige leverandørpræfikser er:

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

Brug af disse egenskaber på den universelle vælger kan være nyttigt, hvis du har et websted med meget brugergenereret indhold. Selvom en fair advarsel kan det se underligt ud på titler og forformateret tekst (

).

Relaterede


    

  • overløb-wrap
    • 

  • bindestreger
    • 

  • hvidt rum
    • 

  • Håndtering af lange ord og webadresser
    • 



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 


 

 



Safari og iOS understøtter break-allværdien, men ikkekeep-all