Ordbrudd - CSS-triks

Anonim

Den word-breakeiendom i CSS kan brukes til å endre seg når linjeskift bør skje. Normalt kan linjeskift i tekst bare forekomme i visse mellomrom, som når det er mellomrom eller bindestrek.

I eksemplet nedenfor kan vi lage word-breakmellom bokstavene i stedet:

p ( word-break: break-all; )

Hvis vi deretter setter bredden på teksten til en em, vil ordet brytes med hver bokstav:

Se penninnstillingsteksten vertikalt med ordskift av CSS-Tricks (@ css-tricks) på CodePen.

Denne verdien brukes ofte på steder med brukergenerert innhold, slik at lange strenger ikke risikerer å bryte oppsettet. Et veldig vanlig eksempel er en lang kopi og limt URL. Hvis den nettadressen ikke har bindestrek, kan den strekke seg utenfor foreldreboksen og se dårlig ut eller verre, forårsake layoutproblemer.

Se pennefikseringskoblinger med ordbrudd av CSS-Tricks (@ css-tricks) på CodePen.

Verdier

  • normal: bruk standardreglene for ordbrudd.
  • break-all: hvilket som helst ord / bokstav kan gå over til neste linje.
  • keep-all: For kinesiske, japanske og koreanske tekst blir ikke ord ødelagt. Ellers er dette det samme som normal.

Denne egenskapen brukes også ofte sammen med bindestrekegenskapen, slik at når det oppstår brudd, settes det inn en hypen, i henhold til standarden i bøker.

Full bruk, med nødvendige leverandørprefikser, 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;

Å bruke disse egenskapene på universalvelgeren kan være nyttig hvis du har et nettsted med mye brukergenerert innhold. Selv om det er rettferdig advarsel, kan det se rart ut på titler og forhåndsformatert tekst (

).

I slekt


    

  • overflow-wrap
    • 

  • bindestreker
    • 

  • hvit-plass
    • 

  • Håndtering av lange ord og nettadresser
    • 



Nettleserstøtte


Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.


Desktop


 

 

 Chrome Firefox DVS Kant Safari 


 

 

 

 23 49 11 18 6.1 


 

 



Mobil / nettbrett


 

 

 Android Chrome Android Firefox Android iOS Safari 


 

 

 

 88 85 4.4 7,0-7,1 


 

 



Safari og iOS støtter break-allverdien, men ikkekeep-all