Kurs HTML

Wprowadzenie: Stylizowanie pierwszego wiersza

Pseudoelement ::first-line pozwala wybrać i nadać specjalny styl **pierwszemu sformatowanemu wierszowi** tekstu wewnątrz elementu blokowego (podobnie jak ::first-letter, działa na elementach typu block, inline-block, list-item, table-cell, table-caption).

Długość (liczba słów) pierwszego wiersza zależy od wielu czynników, takich jak szerokość elementu, rozmiar czcionki, a nawet rozmiar okna przeglądarki. ::first-line dynamicznie dopasowuje się do aktualnie sformatowanego pierwszego wiersza.

Jest to przydatne do wyróżnienia początku akapitu, np. poprzez zmianę koloru, wagi czcionki lub dodanie przekształcenia tekstu.

Jak działa ::first-line?

Przeglądarka podczas renderowania tekstu określa, które słowa mieszczą się w pierwszym wierszu danego bloku. Do tych właśnie słów (a dokładniej, do fragmentu tekstu tworzącego pierwszy wiersz) stosowane są style zdefiniowane dla ::first-line.

Jeśli zmienisz rozmiar okna lub szerokość kontenera, zawartość pierwszego wiersza może się zmienić, a style ::first-line zostaną automatycznie zastosowane do nowego pierwszego wiersza.

<p class="highlight-first">To jest przykładowy, nieco dłuższy akapit tekstu, którego pierwszy wiersz zostanie specjalnie ostylowany. Zobacz, jak stylizacja dopasowuje się, gdy zmieniasz szerokość okna przeglądarki.</p>

.highlight-first::first-line {
  color: navy; /* Ciemnoniebieski kolor */
  font-weight: bold; /* Pogrubienie */
  text-transform: uppercase; /* Wielkie litery */
  letter-spacing: 1px; /* Zwiększony odstęp między literami */
}

Wypróbuj: Zmieniaj szerokość okna przeglądarki, a zobaczysz, że styl (wielkie litery, pogrubienie, kolor) jest zawsze stosowany tylko do słów mieszczących się w pierwszym wierszu akapitu.

Dozwolone właściwości CSS dla ::first-line

Podobnie jak w przypadku ::first-letter, tylko ograniczony zestaw właściwości CSS może być stosowany do ::first-line. Są to głównie właściwości wpływające na wygląd tekstu:

• Czcionka: font, font-family, font-size, font-style, font-variant, font-weight.
• Kolor i tło: color, background.
• Odstępy i dekoracje: word-spacing, letter-spacing, text-decoration, text-transform, line-height, vertical-align.

Właściwości takie jak margin, padding, border, text-align, float, clear, position, display **nie mogą** być stosowane do ::first-line.

Interakcja z ::before i ::first-letter

• ::before: Jeśli element ma pseudoelement ::before z treścią, ta treść jest wliczana do pierwszego wiersza i może być objęta stylizacją ::first-line.
• ::first-letter: Jeśli używane są oba pseudoelementy, ::first-letter ma pierwszeństwo dla pierwszej litery. Styl ::first-line zostanie zastosowany do reszty pierwszego wiersza.

<p class="combined-pseudo">Pierwsza litera i pierwszy wiersz będą inaczej ostylowane.</p>

.combined-pseudo::first-line {
  color: gray;
  text-transform: uppercase;
}

.combined-pseudo::first-letter {
  font-size: 1.5em;
  color: red; /* Ten kolor nadpisze szary z ::first-line dla pierwszej litery */
  font-weight: bold;
}

W tym przykładzie, pierwsza litera "P" będzie czerwona, pogrubiona i powiększona (styl z ::first-letter). Reszta pierwszego wiersza ("IERWSZA LITERA I PIERWSZY WIERSZ BĘDĄ") będzie szara i zapisana wielkimi literami (styl z ::first-line).