Prelom besede - CSS-triki

Anonim

word-breakHotel v CSS se lahko uporablja za spremembo, ko prelomi vrstic bi se to pojavi. Običajno se lahko prelomi vrstic v besedilu pojavijo samo v določenih presledkih, na primer kadar je presledek ali vezaj.

V spodnjem primeru lahko word-breaknamesto tega naredimo med črkami:

p ( word-break: break-all; )

Če nato nastavimo širino besedila na eno em, se beseda lomi za vsako črko:

Oglejte si besedilo Nastavitev pisala navpično s prelomom besed s pomočjo CSS-trikov (@ css-triki) na CodePenu.

Ta vrednost se pogosto uporablja na mestih z vsebino, ki jo ustvarijo uporabniki, tako da dolgi nizi ne tvegajo zloma postavitve. Zelo pogost primer je dolga kopija in prilepljen URL. Če ta URL nima vezajev, lahko presega nadrejeno polje in izgleda slabo ali še slabše, kar povzroča težave pri postavitvi.

Oglejte si povezave za pritrditev pisala s prelomom besed s CSS-triki (@ css-triki) na CodePen.

Vrednote

  • normal: uporabite privzeta pravila za razbijanje besed.
  • break-all: katera koli beseda / črka se lahko prebije v naslednjo vrstico.
  • keep-all: za kitajske, japonske in korejske besedne besede niso lomljene. V nasprotnem primeru je to enako kot normal.

Ta lastnost se pogosto uporablja tudi v povezavi z lastnostjo vezajev, tako da se ob prelomih vstavi hypen, v skladu s standardom v knjigah.

Celotna uporaba s potrebnimi predponami dobaviteljev je:

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

Uporaba teh lastnosti na univerzalnem izbirniku je lahko koristna, če imate spletno mesto z veliko uporabniško ustvarjeno vsebino. Čeprav je pravično opozorilo, je lahko videti naslove in vnaprej oblikovano besedilo čudno (

).

Sorodno


    

  • overflow-wrap
    • 

  • vezaji
    • 

  • presledek
    • 

  • Ravnanje z dolgimi besedami in URL-ji
    • 



Podpora za brskalnik


Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.


Namizje


 

 

 Chrome Firefox IE Rob Safari 


 

 

 

 23. 49 11. 18. 6.1 


 

 



Mobilni / tablični računalnik


 

 

 Android Chrome Android Firefox Android iOS Safari 


 

 

 

 88 85 4.4 7,0-7,1 


 

 



Safari in iOS podpirata break-allvrednost, vendar nekeep-all