Woorden afbreken en HTML gebruiken in WordPress

Het zal je vast wel zijn opgevallen dat het afbreken van woorden online niet altijd goed gaat en daarom zou je soms graag HTML gebruiken in WordPress.
Vooral op kleinere schermen, zoals je mobiele telefoon “vallen” langere woorden soms helemaal van het scherm af. Dit komt doordat websites zich aanpassen aan de breedte van het scherm en dezelfde teksten en afbeeldingen tonen op zowel een groot scherm als een klein scherm.

We kunnen de tekst helaas niet veel kleiner maken op een mobieltje, anders kan je het niet meer lezen. Daarom worden de afbeeldingen meestal kleiner getoond om de tekst meer ruimte te geven. Ook is de tekst “vloeibaar” waardoor op een kleiner scherm de tekst die er niet meer naast past er onder komt. Prima, maar waarom gaat het dan toch niet altijd goed?

De tekst wordt standaard afgebroken aan het eind van een woord, maar dat is niet altijd wat we willen. Een koppelteken(verbindingsstreepje), een geforceerde afbreek naar de volgende regel of woorden koppelen zijn dan handige oplossingen, maar hoe krijg je dat voor elkaar?

Tekst-gedraging beïnvloeden met HTML

We geven hieronder een aantal HTML codes die je in de tekst kan zetten. Voor elke optie staat de uitwerking erbij, dus probeer ze maar uit.
Hou er wel rekening mee dat WordPress standaard HTML code uit je teksten filtert waardoor je de uitwerking vaak nog niet kan zien. Op sommige plekken, zoals titels en teksten op navigatieknoppen werkt het meestal wel meteen.

In een tekstblok of de klassieke bewerker kan je dit oplossen door een “Eigen HTML”-blok gebruiken, code blok/tags of voorgeformateerde tekst blok/tags gebruiken.

HTML gebruiken in WordPress

Nog een manier om de HTML-codes van hierboven te gebruiken is om een zogeheten Autop plugin gebruiken waarmee je het wegfilteren van code in WordPress helemaal kan tegenhouden.
Op deze manier kan je dus HTML gebruiken in WordPress op je webpagina’s en in je nieuwsberichten.
Let hier wel mee op, want het kan soms gekke gedragingen opleveren en wanneer je PHP of Javascript gebruikt kan het zelfs een risico opleveren voor hackers.

Disclaimer: Check altijd het resultaat voordat je dingen live zet voor je bezoekers en gebruik alleen script-talen wanneer je weet wat je doet. Je overrulet namelijk standaard gedrag van WordPress, dus je doet dit op eigen risico.

Lege regels behouden in WordPress

Wanneer je de spaties en lege regels van een tekst wil behouden kan je bij WordPress ook de Pre of Code optie gebruiken. Hier een voorbeeld hoe je de voorgeformateerde tekst oplossing zou toepassen:

<pre>
lorem ipsum
lorem ipsum

lorem ipsum
</pre>

Je zou dan wanneer de breedte het toelaat zoiets als dit kunnen maken, hoewel dat misschien makkelijker is met Illustrator of een ander pakket door er dan een screenshot van te maken:

Automatisch afbreken aan- of uitzetten

Met de bovenstaande HTML-codes kan je meerdere effecten in een tekst naar wens gaan invoegen, maar vind je dat te veel werk, dan kan dat voor de verbindingsstreepjes ook automatisch gebeuren. Plak daarvoor de volgende CSS-code bijvoorbeeld in het onderdeel Extra CSS van de WordPress Customizer.

p { -moz-hyphens:auto !important;
-ms-hyphens:auto !important;
-webkit-hyphens:auto !important;
 hyphens:auto !important;}

Sommige thema’s hebben dit gedrag al ingebouwd, dus wil je dit gedrag uitzetten, dan kan je in de code hierboven “auto” juist vervangen door “none”.

Nawoord

Met deze korte uitleg hebben we je een aantal manieren aangegeven om tekst te beïnvloeden wanneer deze niet op de gewenste manier afbreekt. Ook hebben we opties aangegeven om tekst in WordPress te plaatsen zonder dat de lege regels worden weggehaald, of code wordt verwijderd. Bovendien leer je met de tips hoe je HTML kan gebruiken in je teksten. Ben je niet bekend met HTML en CSS, dan kan je bij ons altijd nog een praktijkgerichte cursus hiervoor volgen.
Laat je vragen of opmerkingen hieronder achter, dan komen we daar zo snel mogelijk op terug.