Bindestreger - CSS-tricks

Anonim

De hyphensejendom kontrol orddeling af tekst i blok niveau elementer. Du kan overhovedet forhindre orddeling, tillade det eller kun tillade det, når bestemte tegn er til stede.

Bemærk, at det hyphenser sprogfølsomt. Dens evne til at finde pausemuligheder afhænger af det sprog, der er defineret i langattributten til et overordnet element. Ikke alle sprog understøttes endnu, og support afhænger af den specifikke browser.

Syntaks

p ( hyphens: none | manual | auto )

bindestreger: ingen

Ord er ikke bindestreg ved linjeskift, selvom tegn inde i ordet antyder, hvor orddeling kan eller skal gå.

bindestreger: manuel

Ord brydes kun ved linjeskift, hvor der er tegn inde i ordet, der antyder linjeskiftmuligheder. Der er to tegn, der foreslår linjeskiftmulighed:

  • U+2010(BINDSTREF): det “hårde” bindestregtegn angiver en synlig mulighed for linjeskift. Selvom linjen ikke faktisk er brudt på det tidspunkt, gengives bindestrek stadig. Bogstaveligt talt en “-”.
  • U+00AD(SHY): en usynlig, "blød" bindestreg. Denne karakter gengives ikke synligt; i stedet foreslår det et sted, hvor browseren muligvis vælger at bryde ordet, hvis det er nødvendigt. I HTML kan du bruge -til at indsætte en blød bindestreg.

bindestreger: auto

Ord kan brydes ved passende orddeling, enten som bestemt af orddelingstegn (se ovenfor) inde i ordet eller som automatisk bestemt af en sproglig passende orddeling (hvis det understøttes af browseren eller leveres via @hyphenation-resource).

Betingede orddelestreger inde i et ord, hvis de er til stede, prioriteres over automatiske ressourcer, når de bestemmer orddelingspunkter i ordet.

bindestreger: alle

Forældet, må ikke bruges . Dette var kun i specifikationen midlertidigt til test.

Demo

Demoen nedenfor har en masse afsnit, og alt er indstillet til hyphens: auto;at demonstrere begrebet orddeling. Den langegenskab er indstillet til enpå det overordnede element.

Tjek denne pen!

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
88 6 * 10 * 12 * 5.1 *

Mobil / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 4,2-4,3 *

Safari 5+ kræver -webkit-, Firefox 6+ kræver -moz-, IE 10+ kræver -ms-, iOS 4.2+ kræver -webkit-.

Chrome <55 og Android-browser understøtter faktisk -webkit-hyphens: none, hvilket er standardværdien, men ingen af ​​de andre værdier.

I Firefox og Internet Explorer fungerer automatisk orddeling kun for nogle sprog (defineret med langattributten). Se denne note for en omfattende liste over understøttede sprog.

Hvis du skriver et webbaseret dokument, der virkelig har brug for bindestreg, kan du bruge Hyphenator.js, som er et bibliotek baseret på en stor ordbog, der automatisk indsprøjter bløde bindestreger og mellemrum i nul bredde i dit indhold.

Uden JavaScript skal du stole på begge hyphensog word-wrap:

.hyphenate ( word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; )