De hyphensstyr fastighets avstavning av text i block nivåelement. Du kan förhindra att bindestreck alls sker, tillåta det eller bara tillåta det när vissa tecken finns.
Observera att det hyphensär språkkänsligt. Dess förmåga att hitta pausmöjligheter beror på språket som definieras i langattributet för ett överordnat element. Inte alla språk stöds än, och supporten beror på den specifika webbläsaren.
Syntax
p ( hyphens: none | manual | auto )bindestreck: inga
Ord avstavas aldrig vid radbrytningar, även om tecken inuti ordet antyder var avstavning kan eller bör gå.
bindestreck: manuell
Ord bryts bara vid radbrytningar där det finns tecken inuti ordet som föreslår möjligheter till radbrytning. Det finns två karaktärer som föreslår linjeövergångsmöjlighet:
U+2010(Bindestreck): den “hårda” bindestreckens karaktär indikerar en synlig möjlighet till avbrott i linjen. Även om linjen faktiskt inte bryts vid den punkten återges bindestrecket. Bokstavligen en "-".U+00AD(SHY): ett osynligt, ”mjukt” bindestreck. Denna karaktär återges inte synligt. istället föreslår det en plats där webbläsaren kan välja att bryta ordet om det behövs. I HTML kan du använda för-att infoga ett mjukt bindestreck.
bindestreck: auto
Ord kan brytas vid lämpliga avstavningspunkter antingen som bestäms av avstavningstecken (se ovan) inuti ordet eller som bestäms automatiskt av en språkanpassad avstavningsresurs (om den stöds av webbläsaren eller tillhandahålls via @hyphenation-resource).
Villkorliga bindestreckstecken i ett ord, om de finns, prioriteras framför automatiska resurser när de bestämmer avstavningspunkter i ordet.
bindestreck: alla
Föråldrad, använd inte . Detta var bara i specifikationen tillfälligt för testning.
Demo
Demon nedan har en massa stycken och allt är inställt för hyphens: auto;att demonstrera begreppet avstavning. Det langattribut är satt till enpå det överordnade elementet.
Webbläsarstöd
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| 88 | 6 * | 10 * | 12 * | 5,1 * |
Mobil / surfplatta
| 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 och Android-webbläsaren stöder faktiskt -webkit-hyphens: none, vilket är standardvärdet, men inget av de andra värdena.
I Firefox och Internet Explorer fungerar automatisk bindestreck endast för vissa språk (definierat med langattributet). Se denna anmärkning för en omfattande lista över språk som stöds.
Om du skriver ett webbaserat dokument som verkligen behöver bindestreck kan du använda Hyphenator.js som är ett bibliotek baserat på en stor ordlista som automatiskt injicerar mjuka bindestreck och nollbredd i ditt innehåll.
Utan JavaScript måste du lita på båda hyphensoch word-wrap:
.hyphenate ( word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; )