Przejdź do treści

Transformacja tekstu {text-transform}

W jaki sposób przekształcić zwykły tekst na pisany w całości dużymi albo małymi literami? Jak zmienić pierwsze litery wszystkich wyrazów na wielkie?

selektor { text-transform: transformacja }
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Natomiast jako "transformacja" należy podać:
  • none - bez zmian
  • capitalize - zamiana pierwszych liter wszystkich wyrazów na wielkie
  • uppercase - zamiana wszystkich liter na wielkie
  • lowercase - zamiana wszystkich liter na małe

Polecenie umożliwia na wybór określonej transformacji tekstu, czyli atrybutów dotyczących zmiany wielkości liter (wielkie/małe) w tekście.

Przykład {text-transform}

To jest akapit z transformacją tekstu none... To jest akapit z transformacją tekstu none... To jest akapit z transformacją tekstu none...

To jest akapit z transformacją tekstu capitalize... To jest akapit z transformacją tekstu capitalize... To jest akapit z transformacją tekstu capitalize...

To jest akapit z transformacją tekstu uppercase... To jest akapit z transformacją tekstu uppercase... To jest akapit z transformacją tekstu uppercase...

To jest akapit z transformacją tekstu lowercase... To jest akapit z transformacją tekstu lowercase... To jest akapit z transformacją tekstu lowercase...

Pytania i odpowiedzi {text-transform}

Co robi "text-transform"?

Właściwość CSS text-transform służy do kontrolowania transformacji tekstu, takiej jak zmiana wszystkich liter na wielkie litery, małe litery lub pierwsze litery słów na wielkie litery.

Jak zrobić duże litery CSS?

Aby przekształcić tekst na duże litery w CSS, możesz użyć właściwości text-transform i ustawić jej wartość na uppercase. Na przykład: <p style="text-transform: uppercase">...</p>. To spowoduje, że wszystkie litery w tekście będą wielkie.

Przeglądarki


Chrome

Firefox

Edge

Opera

Safari
text-transform: wartość1
2008-12-11
1
2004-11-09
12
2015-07-29
7
2003-01-28
1
2003-06-23
text-transform: capitalize1
2008-12-11
1
2004-11-09
12
2015-07-29
7
2003-01-28
1
2003-06-23
text-transform: lowercase1
2008-12-11
1
2004-11-09
12
2015-07-29
15
2013-07-02
1
2003-06-23
text-transform: none1
2008-12-11
1
2004-11-09
12
2015-07-29
15
2013-07-02
1
2003-06-23
text-transform: uppercase1
2008-12-11
1
2004-11-09
12
2015-07-29
15
2013-07-02
1
2003-06-23

Komentarze

Zobacz więcej komentarzy

Facebook