IN DEZE HANDLEIDING:
Wanneer tekst bij elkaar houden en niet afbreken
Vaak kun je het uiterlijk van je web-pagina verbeteren door bepaalde woorden en alinea’s in een tekst samen op de regel te houden, of samen voor of na een pagina-einde te plaatsen. Hier volgt een hele handige weinig gebruikte tip hoe je tekst mooi kan weergeven die in sommige gevallen lelijk wordt afgebroken.
Je zult merken dat als je een web-pagina op verschillende resoluties bekijkt, soms woorden niet mooi worden afbroken. Wanneer wil je elkaar houden en niet afbreken? Ik geef 2 voorbeelden:
Voorbeeld afbreking 1
Datum bij elkaar houden en niet afbreken in kop of regel
Foute afbreking:
- 13 september
2021
of
- 13
september 2021
Goede afbreking:
Mooi de hele datum aan elkaar:
- 13 september 2021
Voorbeeld afbreking 2
Prijs of korting bij elkaar houden en niet afbreken
Foute afbreking:
- 10%
korting
Goede afbreking:
Mooi de hele korting of prijs aan elkaar:
- 10% korting
Hoe kun je tekst bij elkaar houden?
Als je wilt dat twee woorden, of twee delen van een woord dat met een afbreekstreepje wordt afgebroken, op dezelfde regel komen te staan, kun je een vaste spatie of een vast afbreekstreepje gebruiken in plaats van een gewone spatie of gewoon afbreekstreepje.
Tekst niet afbreken met harde niet afbreekbare spatie
Vervang de gewone spatie tussen 2 of meer woorden door het volgende teken of code.
nbsp (non-breaking space) met een & ervoor en een punt-comma erachter (zie afbeelding onderaan):
Om de datum 13 september 2021 mooi bij elkaar te houden geef je dus de volgende tekst in:
13 september 2021<br>
Let op: vul deze code alleen in de tekst of html modus in. Anders werkt het niet.
Min-inhoud grootte met CSS
Om de minimale grootte van het vak te vinden die de inhoud zal bevatten zonder overlopen, stel de width of inline-size eigenschap van het vak in op min-inhoud.
.box {
inline-size: min-content;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text/Wrapping_Text#finding_the_min-content_sizehttps://developer.mozilla.org/en-US/docs/Web/CSS/min-content
Woorden afbreken
https://www.w3.org/TR/css-text-3/#line-breaking