text-transformNieruchomość w CSS kontroluje wielkość liter i liter.
.lowercase ( text-transform: lowercase; )Wartości przekształcania tekstu
lowercasezamienia wszystkie litery zaznaczonego tekstu na małe.uppercasezamienia wszystkie litery zaznaczonego tekstu na wielkie.capitalizewielką literą każdego słowa w zaznaczonym tekście.nonepozostawia wielkość liter i wielkie litery w tekście dokładnie tak, jak zostały wprowadzone.inheritnadaje tekstowi wielkość liter i wielkość liter jego rodzica.
Demo poniżej pokazuje lowercase, uppercaseoraz capitalizew użyciu. Spójrz na kartę HTML, aby zobaczyć, jak tekst został pierwotnie napisany, a następnie wróć do karty wyników, aby zobaczyć ją po zastosowaniu CSS.
Zobacz Pen 0f4293fce0d14aafc3818c950ab0ded3 autorstwa mariemosley (@mariemosley) na CodePen.
Użyteczne miejsca
capitalizezamieni słowa, które pojawiają się w apostrofach lub cudzysłowach, oraz pierwszą literę po myślniku. Pierwsza litera po cyfrze nie będzie zaczynać się wielką literą, więc daty takie jak „4 lutego 2015” nie zostaną zmienione na „4 lutego 2015”.
capitalizedotyczy tylko pierwszych liter słów. Nie zmieni to wielkości pozostałych liter w słowie. Na przykład, jeśli masz capitalizesłowo, które jest już zapisane wielkimi literami, inne litery w tym słowie nie zostaną zamienione na małe. Jest to przyjemne, gdy tekst zawiera akronim lub skrót, który nie powinien zawierać żadnych małych liter.
CSS nie obsługuje „wielkości liter”, stylu wielkich liter używanego w tytułach książek, filmów, piosenek i wierszy, w których artykuły są pisane małymi literami (jak w „Poszukiwaczach zaginionej arki”). Istnieją jednak rozwiązania JavaScript dla wielkości liter, w tym metoda toTitleCase () Davida Goucha.
Więcej informacji
- text-transform w MDN
- text-transform w specyfikacji W3C
- Uwagi dotyczące dostępności tekstu wielkimi literami z WebAIM
Wsparcie przeglądarki
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| Każdy | Każdy | Każdy | Każdy | Każdy | Każdy | Każdy |
Firefox obsługuje specyficzne dla języka reguły wielkości liter w językach tureckich, niemieckim, holenderskim i greckim, które nie są obsługiwane przez inne przeglądarki. Firefox jest także jedyną obsługiwaną przeglądarką text-transform: full-width;, która może pomóc poprawić czytelność tekstu zawierającego mieszankę skryptów łacińskich i wschodnioazjatyckich. Zobacz szczegóły w MDN.