Zalomenie slova - Triky CSS

Anonim

word-breakVlastnosť CSS môže byť použitá k zmene, keď konce riadkov by mal nastať. Konce riadkov v texte sa zvyčajne môžu vyskytovať iba v určitých medzerách, napríklad keď je medzera alebo pomlčka.

V príklade nižšie môžeme word-breaknamiesto toho vytvoriť medzery:

p ( word-break: break-all; )

Ak potom nastavíme šírku textu na jednu em, slovo sa zalomí o každé písmeno:

Prečítajte si text Nastavenie pera vertikálne s prerušovaním slov pomocou CSS-Tricks (@ css-tricks) na CodePen.

Táto hodnota sa často používa na miestach s obsahom generovaným používateľmi, aby dlhé reťazce neriskovali narušenie rozloženia. Jedným veľmi častým príkladom je dlhá kópia a vložená adresa URL. Ak táto adresa URL nemá pomlčky, môže presahovať rámec rodiča a vyzerať zle alebo horšie a spôsobiť problémy s rozložením.

Pozrite si odkazy Fixing pera s prerušovaním slov od CSS-Tricks (@ css-tricks) na CodePen.

Hodnoty

  • normal: použiť predvolené pravidlá pre delenie slov.
  • break-all: akékoľvek slovo / písmeno môže prelomiť na ďalší riadok.
  • keep-all: pre čínsky, japonský a kórejský textový text nie je prerušený. Inak je to to isté ako normal.

Táto vlastnosť sa tiež často používa v spojení s vlastnosťou spojovníkov, takže keď dôjde k prerušeniu, vloží sa spojka podľa štandardu v knihách.

Plné využitie s potrebnými predponami dodávateľov 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;

Používanie týchto vlastností v univerzálnom selektore môže byť užitočné, ak máte web s veľkým obsahom generovaným používateľmi. Aj keď to je spravodlivé varovanie, na názvoch a predformátovanom texte to môže vyzerať čudne (

).

Súvisiace


    

  • prepadový obal
    • 

  • pomlčky
    • 

  • Biely vesmír
    • 

  • Spracovanie dlhých slov a adries URL
    • 



Podpora prehľadávača


Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.


Desktop


 

 

 Chrome Firefox IE Hrana 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 a iOS túto break-allhodnotu podporujú, ale niekeep-all