In veel geschreven talen is het mogelijk om regels tussen lettergrepen en tussen woorden af te breken. Dit wordt vaak gedaan zodat er meer tekens op een tekstregel kunnen worden geplaatst met als doel minder regels in een tekstgebied te hebben en zo ruimte te besparen. In dergelijke talen wordt de onderbreking visueel aangegeven met een koppelteken ('-').
De CSS-tekstmodule niveau 3 definieert een eigenschap koppeltekens om te bepalen wanneer koppeltekens aan gebruikers worden getoond en hoe ze zich gedragen wanneer ze worden weergegeven. Vanaf versie 55 implementeert Chrome de eigenschap koppeltekens. Volgens de specificatie heeft de eigenschap hyphens drie waarden: none , manual en auto . Om dit te illustreren moeten we een zacht koppelteken ( ­ ) gebruiken, zoals in het volgende voorbeeld.
Google ipsum dolor sit amet, consectetur adipiscing e­lit.
Een zacht afbreekstreepje is een afbreekstreepje dat alleen wordt weergegeven als het in de achterliggende marge voorkomt. Hoe dit koppelteken wordt weergegeven in Chrome 55 of hoger, hangt af van de waarde van de CSS-eigenschap hypens .
-webkit-hyphens: manual;
hyphens: manual;
Als je deze combineert, krijg je een resultaat als dit:
Merk op dat het zachte koppelteken niet zichtbaar is. In alle gevallen zal het streepje onzichtbaar zijn als een woord met een zacht koppelteken op één regel past. Laten we nu eens kijken hoe alle drie de waarden van het koppelteken zich gedragen.
Gebruik geen
In het eerste voorbeeld is de eigenschap hyphens ingesteld op none . Dit voorkomt dat het zachte koppelteken ooit wordt weergegeven. U kunt dit bevestigen door de venstergrootte zo aan te passen dat het woord 'elit' niet in de zichtbare tekstregel past.
Handleiding gebruiken
In het tweede voorbeeld is de eigenschap koppeltekens ingesteld op manual , wat betekent dat het zachte koppelteken alleen verschijnt als de marge het woord 'elit' doorbreekt. Nogmaals, u kunt dit bevestigen door de venstergrootte aan te passen.
Auto gebruiken
In het derde voorbeeld is de eigenschap hyphens ingesteld op auto . In dit geval is er geen zacht koppelteken nodig, aangezien de user-agent de locaties van het koppelteken automatisch bepaalt. Als u het formaat van het venster wijzigt, ziet u dat de browser dit voorbeeld op dezelfde plaats afbreekt als in het tweede voorbeeld, hoewel er geen zacht koppelteken aanwezig is. Als u doorgaat met het verkleinen van het venster, zult u zien dat uw browser regels tussen twee lettergrepen in de tekst kan afbreken.