::first-line
Stylizuje pierwszy wiersz tekstu w elemencie blokowym, niezależnie od tego, ile słów się w nim zmieści.
Przykład
#.lead::first-line {
color: #fff;
font-weight: 700;
letter-spacing: 0.02em;
}<p class="lead" style="margin: 0; color: #a1a1aa;">Witaj w Starożytnym Egipcie. W tym module poznasz znaczniki HTML, z których zbudowane są wszystkie strony internetowe, i napiszesz swoją pierwszą stronę.</p>Definicja i zastosowanie
#Pseudoelement ::first-line obejmuje pierwszy wiersz tekstu tak, jak widzi go czytelnik. Nie jest związany z konkretnymi słowami: gdy zmieni się szerokość okna, do pierwszego wiersza wejdzie więcej lub mniej tekstu, a styl dopasuje się sam.
Działa w elementach blokowych i obsługuje głównie właściwości tekstu: czcionkę, kolor, tło, odstępy między literami i słowami, text-transform, text-decoration i text-shadow. Marginesy, dopełnienie i obramowanie nie zadziałają, bo wiersz nie jest osobnym pudełkiem.
Typowe zastosowanie to wyróżnienie początku artykułu, np. wersaliki w pierwszym wierszu, często razem z inicjałem z ::first-letter. Gdy oba działają naraz, pierwsza litera dziedziczy styl pierwszego wiersza i dokłada do niego własny.
Składnia
#selektor::first-line { właściwość: wartość; }Typowe style
#- Pierwszy wiersz wersalikami. Zakres dopasowuje się do szerokości akapitu.
- Jaśniejszy i pogrubiony początek akapitu.
- Tło obejmuje tylko tekst pierwszego wiersza, jak zakreślacz.
Typowe style w praktyce
#text-transform
.demo::first-line {
text-transform: uppercase;
letter-spacing: 0.04em;
}color
.demo::first-line { color: #c4b5fd; font-weight: 700; }background
.demo::first-line { background: rgb(124 58 237 / 0.35); }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Nie umieszczaj w pierwszym wierszu informacji, które muszą być wyróżnione zawsze. Na telefonie wiersz jest krótszy, więc wyróżni się mniej słów.
- Połącz
::first-linez::first-letter, a dostaniesz klasyczny, gazetowy początek artykułu.
Powiązane hasła
#- ::first-letterStylizuje pierwszą literę pierwszego wiersza w bloku tekstu. Klasyczny sposób na inicjał na początku artykułu.
- text-transformZmienia wielkość liter: wszystkie wielkie, wszystkie małe lub wielkie pierwsze litery.
- letter-spacingZmienia odstępy między literami.
- font-weightUstawia grubość czcionki, od cienkiej po bardzo pogrubioną.
- ::selectionZmienia wygląd fragmentu tekstu zaznaczonego przez użytkownika myszą lub klawiaturą.
Widzisz błąd albo brakuje przykładu? Napisz do nas.