De text-transformeigenschap in CSS beheert hoofdletters en kleine letters.
.lowercase ( text-transform: lowercase; )Text-Transform-waarden
lowercasemaakt alle letters in de geselecteerde tekst in kleine letters.uppercasemaakt alle letters in de geselecteerde tekst in hoofdletters.capitalizemaakt een hoofdletter van de eerste letter van elk woord in de geselecteerde tekst.nonelaat de hoofdletters en kleine letters van de tekst precies zoals deze is ingevoerd.inheritgeeft de tekst de hoofdletters en kleine letters van de bovenliggende tekst.
De demo hieronder laat zien lowercase, uppercaseen capitalizein gebruik is. Bekijk het HTML-tabblad om te zien hoe de tekst oorspronkelijk is geschreven en schakel vervolgens terug naar het resultaten-tabblad om het te zien nadat de CSS is toegepast.
Zie de pen 0f4293fce0d14aafc3818c950ab0ded3 door mariemosley (@mariemosley) op CodePen.
Nuttige Plaatsen
capitalizezal woorden die tussen enkele of dubbele aanhalingstekens staan, en de eerste letter na een koppelteken een hoofdletter geven. De eerste letter na een cijfer wordt niet met een hoofdletter geschreven, dus datums als "4 februari 2015" worden niet omgezet in "4 februari 2015".
capitalizeheeft alleen invloed op de eerste letters van woorden. Het zal de hoofdlettergebruik van de rest van de letters in een woord niet veranderen. Als u bijvoorbeeld capitalizeeen woord heeft dat al volledig in hoofdletters is geschreven, worden de andere letters van het woord niet in kleine letters omgezet. Dit is handig als uw tekst een acroniem of afkorting bevat die geen kleine letters mag bevatten.
CSS kan geen "title case" gebruiken, de stijl van hoofdlettergebruik die wordt gebruikt in titels van boeken, films, liedjes en gedichten, waarbij artikelen in kleine letters staan (zoals in "Raiders of the Lost Ark"). Maar er zijn JavaScript-oplossingen voor titelgevallen, waaronder toTitleCase () van David Gouch.
Meer informatie
- text-transform bij MDN
- text-transform in de W3C Spec
- Opmerkingen over de toegankelijkheid van hoofdletters uit WebAIM
Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| Ieder | Ieder | Ieder | Ieder | Ieder | Ieder | Ieder |
Firefox ondersteunt taalspecifieke regels voor hoofdlettergebruik voor Turkse talen, Duits, Nederlands en Grieks die niet worden ondersteund door andere browsers. Firefox is ook de enige browser die ondersteuning biedt text-transform: full-width;, wat kan helpen bij het verbeteren van de leesbaarheid van tekst die een combinatie van Latijnse en Oost-Aziatische scripts bevat. Zie details op MDN.