Strona główna >CSS >Leksykon CSS – właściwości, selektory, funkcje >::first-line

::first-line

selektor::first-line

Wybiera pierwszy wiersz tekstu elementu blokowego – taki, jak go przeglądarka akurat złamała. Przy innej szerokości okna lub rozmiarze czcionki pierwszy wiersz zawiera inną liczbę słów, a styl przesuwa się razem z nimi.

Wartości

Można użyć tylko właściwości czcionki i tekstu: font…, color, tła, letter-spacing, word-spacing, text-decoration, text-transform, line-height, cienia tekstu. Bez marginesów, wewnętrznych odstępów i obramowań.

Przykłady

Pierwszy wiersz zajawki jest złożony kapitalikami i ciemniejszy:

<p class="excerpt">Pierwszy wiersz tego akapitu jest złożony kapitalikami, kolejne wiersze normalnie – a ile słów zmieści się w pierwszym wierszu, zależy od szerokości.</p>

.excerpt::first-line {
  color: #01579b;
  font-variant: small-caps;
  letter-spacing: 0.05em;
}

Wynik: słowa pierwszego wiersza są ciemnoniebieskie, złożone kapitalikami i z nieco większym odstępem między literami; po zwężeniu okna styl obejmuje mniej słów.

Na co uważać

  • Działa tylko w elementach blokowych, tak samo jak ::first-letter.
  • Według MDN Safari nie stosuje text-transform w ::first-line (stan na październik 2026). Do wielkich liter w pierwszym wierszu pewniejsze jest font-variant: small-caps.
  • Jeśli pierwszy wiersz ma dodatkowo ::first-letter, jego styl ma pierwszeństwo dla pierwszej litery.

Obsługa w przeglądarkach

Baseline – szeroko dostępne: działa we wszystkich popularnych przeglądarkach, i to od dawna (najpóźniej od 2015 roku). Od wersji: Chrome 1, Firefox 1, Safari 1. Stan: październik 2026 (MDN browser-compat-data).

Zobacz też:
::first-letter
::before i ::after
font-variant-numeric
text-transform
letter-spacing