CSS3 – Wordwrap

uit de cursus Vormgeven met CSS

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

Geef een reactie

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Vormgeven met CSS

perm_identity Belinda | video_library 49 video's | query_builder 03:05:49

CSS3 is de nieuwe standaard en is onderverdeeld in modules waaraan apart ontwikkeld wordt.  Samen met HTML5 levert CSS veel voordelen voor webdesigners. De code is schoner, de vormgeving functioneler en de webpagina’s zijn bovendien sneller op diverse (mobiele)apparaten. Het biedt de fun en mooie hippe mogelijkheden voor het vormgeven van webpagina’s. Denk aan teksteffecten, patronen, schaduwrandjes en animaties. Samen met HTML5 levert CSS3 functionele grafische mogelijkheden, het wordt breed ondersteund en is sneller.

Modulaire ontwikkeling

Eigenlijk spreken we na CSS2 niet meer van een versie. De term CSS3 wordt gebruikt om de nieuwe vorm van CSS aan te duiden. CSS werd opgesplitst in aparte Modules. De modules waaraan apart gewerkt en ontwikkeld wordt zijn onder andere:

  • Backgrounds & Borders
  • Text Effects
  • 2D/3D Transformations
  • Animations

Natuurlijk wordt er in deze online cursus aandacht besteed aan de leuke en fancy mogelijkheden, maar ook bijvoorbeeld het gebruiken van Google Webfonts in een webpagina behoort tot de onderwerpen.

En dan laat ik nu nog het text-effect 'wordwrap' zien.

In de kop van het eerste artikel staat nu een woord dat niet meer past binnen de beschikbare ruimte.

En deze is nu ook gedeeltelijk niet leesbaar.

Als je denkt dt je dit soort problemen gaat tegenkomen.

Kun je dat alvast oplossen in de css met 'wordwrap'.

De titels van de artikelen staan in de h. Dus zoek in het stijlblad de h selector op.

En vervolgens kun je opgeven dat voor alle koppen het volgende geldt.

Voor als 'word-wrap'. Standaard staat deze op 'normal'. Een woord wordt niet afgebroken. Dat doen browsers standaard niet.

Maar ik kan deze dus nu zetten op 'break-word'.

Dat levert visueel niet een perfect resultaat op. Want er wordt niet echt een afbreek streepje geplaatst.

Er wordt ook niet afgebroken op de plek waar je dit het liefste zou willen.

Dan zou je het echt moeten aangeven in de html broncode.

Maar in ieder geval is de tekst nu niet meer verborgen en in ieder geval nog leesbaar.