text-transform
Zmienia wielkość liter: wszystkie wielkie, wszystkie małe lub wielkie pierwsze litery.
- Wartość domyślna
none- Dziedziczona
- Tak
- Animowalna
- nie
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.textTransform = "uppercase"
Przykład
#.badge {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.75rem;
}<span class="badge box" style="display: inline-grid; text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px;">premium</span>Definicja i zastosowanie
#Właściwość text-transform zmienia sposób wyświetlania liter bez zmiany treści w kodzie. uppercase zamienia wszystkie litery na wielkie, lowercase na małe, a capitalize zaczyna każdy wyraz wielką literą.
To lepsze rozwiązanie niż pisanie tekstu wersalikami w HTML. Czytniki ekranu przeczytają normalny tekst, a nie literowanie, a zmiana stylu w przyszłości nie wymaga poprawiania treści.
Zasady zmiany wielkości liter zależą od języka ustawionego atrybutem lang. Na przykład w tureckim wielka litera od „i” to „İ”, a przeglądarka uwzględni to przy poprawnym lang.
Składnia
#text-transform: none | uppercase | lowercase | capitalize | full-width;Wartości
#- Tekst dokładnie tak, jak w kodzie.
- Wszystkie litery wielkie.
- Wszystkie litery małe.
- Każdy wyraz od wielkiej litery.
Wartości w praktyce
#none
.demo { text-transform: none; }uppercase
.demo { text-transform: uppercase; }lowercase
.demo { text-transform: lowercase; }capitalize
.demo { text-transform: capitalize; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Pisz treść normalnie, a wersaliki nakładaj w CSS. Czytniki ekranu nie będą literować wyrazów.
- Po polsku tytułów nie pisze się każdym wyrazem od wielkiej litery, więc
capitalizerzadko pasuje do polskich nagłówków.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.