De hyphenseigenschap regelt de woordafbreking van tekst in blokniveau-elementen. U kunt woordafbreking helemaal voorkomen, toestaan of alleen toestaan als bepaalde tekens aanwezig zijn.
Merk op dat het hyphenstaalgevoelig is. De mogelijkheid om pauzemogelijkheden te vinden, hangt af van de taal, gedefinieerd in het langattribuut van een bovenliggend element. Nog niet alle talen worden ondersteund en de ondersteuning is afhankelijk van de specifieke browser.
Syntaxis
p ( hyphens: none | manual | auto )koppeltekens: geen
Woorden worden nooit afgebroken bij regeleinden, zelfs niet als tekens binnen het woord aangeven waar de woordafbreking zou kunnen of moeten gaan.
koppeltekens: handmatig
Woorden worden alleen afgebroken bij regeleinden waar er tekens in het woord staan die mogelijkheden voor regeleinden suggereren. Er zijn twee tekens die een regeleinde-mogelijkheid suggereren:
U+2010(HYPHEN): het “harde” koppelteken geeft een zichtbare regelafbreking aan. Zelfs als de regel op dat punt niet echt wordt onderbroken, wordt het koppelteken nog steeds weergegeven. Letterlijk een "-".U+00AD(SHY): een onzichtbaar, "zacht" koppelteken. Dit karakter wordt niet zichtbaar weergegeven; in plaats daarvan stelt het een plaats voor waar de browser ervoor kan kiezen om het woord indien nodig af te breken. In HTML kunt u gebruiken-om een zacht koppelteken in te voegen.
koppeltekens: auto
Woorden kunnen op de juiste afbrekingspunten worden afgebroken, zoals bepaald door afbrekingstekens (zie hierboven) binnen het woord of zoals automatisch bepaald door een taalgeschikte afbrekingsbron (indien ondersteund door de browser of geleverd via @hyphenation-resource).
Voorwaardelijke afbrekingstekens binnen een woord hebben, indien aanwezig, voorrang op automatische bronnen bij het bepalen van afbrekingspunten binnen het woord.
koppeltekens: alle
Verouderd, niet gebruiken . Dit stond alleen tijdelijk in de specificatie om te testen.
Demo
De onderstaande demo heeft een heleboel alinea's en alles is ingesteld om hyphens: auto;het concept van woordafbreking te demonstreren. Het langattribuut is ingesteld enop het bovenliggende element.
Browser-ondersteuning
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 88 | 6 * | 10 * | 12 * | 5,1 * |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 4.2-4.3 * |
Safari 5+ vereist -webkit-, Firefox 6+ vereist -moz-, IE 10+ vereist -ms-, iOS 4.2+ vereist -webkit-.
Chrome <55 en Android-browser ondersteunen eigenlijk -webkit-hyphens: none, wat de standaardwaarde is, maar geen van de andere waarden.
In Firefox en Internet Explorer werkt automatische woordafbreking alleen voor bepaalde talen (gedefinieerd met het langattribuut). Zie deze opmerking voor een uitgebreide lijst met ondersteunde talen.
Als u een webdocument schrijft dat echt moet worden afgebroken, kunt u Hyphenator.js gebruiken, een bibliotheek die is gebaseerd op een uitgebreid woordenboek dat automatisch zachte koppeltekens en spaties met nulbreedte in uw inhoud injecteert.
Zonder JavaScript moet u op beide vertrouwen hyphensen word-wrap:
.hyphenate ( word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; )