0Pricing
CSS Academy · Lekcja

Wyrównanie, dekorowanie i odstępy tekstu

Wyrównają Państwo tekst, dodadzą podkreślenia lub przekreślenia oraz ustawią odstępy między literami i wierszami.

Wyrównanie, dekorowanie i odstępy tekstu to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.

text-align

text-align steruje poziomym wyrównaniem zawartości wierszowej wewnątrz kontenera blokowego.

<p class="left">Left aligned text</p>
<p class="center">Center aligned text</p>
<p class="right">Right aligned text</p>
<p class="justify">Justified text that stretches to fill the full width of its container on every line except the last, spreading word spacing evenly across the line.</p>

text-align: justify

justify rozciąga wiersze tak, aby wypełniły całą szerokość kontenera, dodając odstępy między słowami. Używaj go z hyphens: auto, aby uniknąć nieestetycznych przerw w wąskich kontenerach.

<p>Justified paragraph text with hyphenation enabled so that long words like internationalization can break across justified lines cleanly without leaving large gaps.</p>

text-decoration

text-decoration dodaje linie do tekstu. Jest powszechnie używana do podkreślania odnośników lub przekreślania usuniętej treści.

<a href="#">Underlined link</a>
<p class="strikethrough">Strikethrough text</p>
<a href="#" class="no-underline">No underline link</a>

Właściwości składowe text-decoration

text-decoration jest skrótową właściwością dla linii, stylu, koloru i grubości:

<a href="#">Wavy red underline link</a>

text-transform

text-transform zmienia wielkość liter w tekście bez modyfikowania bazowego kodu HTML:

<p class="upper">uppercase this text</p>
<p class="lower">LOWERCASE THIS TEXT</p>
<p class="title">title case this text</p>
<p class="none">No Transform Applied</p>

text-indent

text-indent wstawia wcięcie pierwszego wiersza elementu blokowego. Użyj wartości ujemnej wraz z odpowiadającym jej dopełnieniem, aby ukryć tekst w sposób dostępny (zamiana tekstu na obraz).

<p class="indent">This paragraph's first line is indented by 2em, a classic print-style paragraph convention brought to the web.</p>
<a href="#" class="logo-link">Company Logo</a>

white-space

white-space steruje sposobem obsługi białych znaków i podziałów wierszy w źródłowym kodzie HTML:

  • normal — redukuje białe znaki do pojedynczych odstępów i zawija tekst na granicach słów
  • nowrap — zapobiega zawijaniu wierszy
  • pre — zachowuje białe znaki i nie zawija tekstu
  • pre-wrap — zachowuje białe znaki i pozwala zawijać tekst
<p class="nowrap">This text will not wrap no matter how long the line becomes.</p>
<pre>function example() {
  return true;
}</pre>

letter-spacing

letter-spacing ustawia dodatkowe odstępy między znakami. Wartości dodatnie rozsuwają glify, a ujemne przybliżają je do siebie. Używaj jednostki em, aby zachować proporcjonalne skalowanie.

<p class="spaced">spaced heading text</p>

word-spacing

word-spacing dodaje dodatkowe odstępy między słowami. Jest rzadko potrzebna, ale przydaje się do precyzyjnego dostosowywania tekstu wyjustowanego lub nagłówków prezentacyjnych.

<h1>Word Spaced Heading Example</h1>

text-overflow: ellipsis

Skracaj tekst wystający poza kontener za pomocą wielokropka. Wymaga to overflow: hidden i white-space: nowrap.

<p class="truncate">This is a very long line of text that will be truncated with an ellipsis</p>

Tekst pionowy z writing-mode

writing-mode zmienia kierunek przepływu tekstu. W połączeniu z text-orientation umożliwia tworzenie pionowej typografii CJK lub kreatywnie obróconych etykiet.

<div class="label">Vertical Label Text</div>

Szybkie sprawdzenie

Jakie trzy właściwości są wymagane, aby wyświetlić wielokropek, gdy tekst wystaje poza kontener?

Podsumowanie

text-align ustawia położenie zawartości wierszowej w kontenerze. text-decoration dodaje lub usuwa linie. text-transform zmienia wielkość liter. Klasyczny sposób skracania tekstu to połączenie white-space: nowrap + overflow: hidden + text-overflow: ellipsis.

Często zadawane pytania

Czy lekcja „Wyrównanie, dekorowanie i odstępy tekstu” jest bezpłatna?

Tak — pełny tekst „Wyrównanie, dekorowanie i odstępy tekstu” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Wyrównanie, dekorowanie i odstępy tekstu”?

Wyrównają Państwo tekst, dodadzą podkreślenia lub przekreślenia oraz ustawią odstępy między literami i wierszami. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć CSS Academy?

Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Wyrównanie, dekorowanie i odstępy tekstu”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?

Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Rodziny czcionek i czcionki bezpieczne dla sieci
  2. Rozmiar, grubość i styl czcionki
  3. Wyrównanie, dekorowanie i odstępy tekstu
  4. Google Fonts i @font-face
← Powrót do CSS Academy