Automatisch woorden en regels afbreken in HTML
HTML5 wordt niet alleen ingezet voor het vormgeven van websites. Je kunt er ook andere dingen mee opmaken, zoals boeken
en brochures. Hierbij is het automatisch afbreken van woorden een vereiste.
De moderne browsers kunnen het ook, geheel of gedeeltelijk. Op deze pagina wordt de stand van zaken beschreven.
Als je woorden automatisch wilt laten afbreken, moet het lang-attribuut zijn ingesteld voor het hele document, dus in de <html>-tag. Voor afwijkende talen moeten lang-attributen in de betreffende tags zijn opgenomen.
Het aansturen van automatisch woord-afbreken gaat met CSS. Dat beperkt zich niet tot alleen woorden, maar je kunt met CSS ook regels afbreken. CSS heeft daarvoor een aantal eigenschappen beschikbaar, zie de tabel hieronder.
| Eigenschap | Beschrijving | |
| word-break | Definieert afbreekregels voor alle talen, behalve
Chinees, Japans en Koreaans. Mogelijke waarden zijn: — normal Hiermee worden de normale afbreekregels gehanteerd, zoals de browser cq. het operating system die beschikbaar heeft. Dit is de default-waarde. — break-all Regels mogen op alle mogelijke plaatsen worden afgebroken. — keep-all Regels mogen niet middenin een woord worden afgebroken. |
|
| word-wrap | Geeft de mogelijkheid om lange woorden af te
breken en voort te zetten op de volgende regel. Mogelijke waarden zijn: — normal Hiermee worden de normale afbreekregels gehanteerd, zoals de browser cq. het operating system die beschikbaar heeft. Dit is de default-waarde. — break-word Woorden mogen op alle mogelijke plaatsen worden afgebroken. |
|
| hyphens | Bepaalt hoe de browser om moet gaan met afbreek-streepjes.
Mogelijke waarden zijn: — none Woorden worden nooit afgebroken, zelfs niet als er een hard of zacht (­) afbreekstreepje staat. Regels worden alleen afgebroken op spaties of tabs. — manual Regels worden alleen afgebroken als er een hard of zacht afbreekstreepje staat. — auto Regels worden alleen afgebroken op plaatsen waar de standaard afbreekregels dat mogelijk maken. Afbreken op een hard of zacht afbreekstreepje gaat voor. |
Een paar CSS-eigenschappen waarmee je het uitlijnen en uitvullen van regels kunt besturen, zijn hieronder genoemd.
| Eigenschap | Beschrijving | |
| white-space | Bepaalt op welke manier regels worden voortgezet
naar de volgende regel (wrapping). Mogelijke waarden zijn: — normal Dit is de default-waarde. Achtereenvolgende witruimtes (spaties) worden samengevoegd tot énén spatie. Regels worden afgebroken zoals altijd. — nowrap De regel wordt niet afgebroken, behalve op <br>-tags.— pre Achtereenvolgende witruimtes (spaties) worden bewaard. Er wordt alleen afgebroken op <br>-tags.— pre-line Achtereenvolgende witruimtes (spaties) worden samengevoegd. Normle afbreekregels. — pre-wrap Achtereenvolgende witruimtes (spaties) worden bewaard. Normale afbreekregels. |
|
| text-align | Bepaalt hoe de tekst per regel wordt uitgelijnd.
Mogelijke waarden zijn: — left De tekst wordt naar links geschoven. Dit is de default-waarde. — right De tekst wordt naar rechts geschoven. — center De tekst wordt gecentreerd op de regel. — justify De tekst wordt over de hele regel verdeeld. |
|
| text-align-last | Hiermee bepaal je hoe de laatste regel
van een tekst wordt getoond, als text-align is ingesteld op justify. Mogelijke waarden zijn:
— auto Dit is de default waarde. De regel wordt links uitgelijnd en uitgevuld. — left De laatste regel wordt links uitgelijnd. — right De laatste regel wordt rechts uitgelijnd. — center De laatste regel wordt gecentreerd. — justify De laatste regel wordt over de regel uitgevuld. — start De laatste regel wordt uitgelijnd aan het begin van de regel. In de meeste talen is dat links. Bij sommige talen (o.a. Arabisch en Hebreeuws) is dat rechts. — end De laatste regel wordt uitgelijnd aan het einde van de regel. In de meeste talen is dat rechts. Bij sommige talen (o.a. Arabisch en Hebreeuws) is dat links. |
|
| text-justify | 
In Chrome moet de vlag Enable Experimental Web Platform Features aan staan, die je kunt inschakelen door in de adresbalk van Chroe te typen: chrome://flags. |
|
| text-overflow | Bepaalt hoe er wordt omgegaan met tekst
die niet in een element past en overflow:hidden is ingesteld. Mogelijke waarden zijn: — clip Dit is de default-waarde. Tekst 'verdwijnt', zoals je bij overflow:hidden zou verwachten. Voorbeeld: — ellipsis De tekst wordt afgebroken en er wordt een ellipsis … (…) getoond. Voorbeeld: — string Dit zou moeten werken zoals ellipsis, maar dan met een string die door de programmeur wordt gekozen. In dit specifieke geval: '$$'.
<p style="text-overflow:keyword; overflow:hidden;.Zie ook het item Tekst automatisch afknippen. |
