Wdowy - CSS-Tricks

Anonim

W terminologii typograficznej, wdowa to ostatni wiersz akapitu, który pozostaje sam na nowej stronie lub w nowej kolumnie. widowsNieruchomość w CSS kontroluje minimalną liczbę wierszy, które mogą wpaść do nowej strony. Ta właściwość dotyczy tylko stronicowanych multimediów, takich jak print.

@media print ( p ( widows: 3; ) )

Jeśli akapit nie mieści się w całości na jednej stronie, jest dzielony tam, gdzie jest to możliwe. W ten sposób pojedyncze wiersze akapitu mogą pojawić się na stronie, zanim przejdą do następnej strony. Zwykle jest to niepożądane, ponieważ wiele edytorów tekstu wymaga pozostawienia co najmniej dwóch wierszy na starej stronie zamiast jednego. orphanWłasność działa podobnie. Możesz nadać mu liczbę dodatnią (gdzie 2 jest wartością domyślną) lub inherit.

Należy pamiętać, że ta widowswłaściwość zazwyczaj nie wpływa na media niestronicowane, takie jak screen. Jednak przeglądarki obsługujące obie te funkcje widowsi columnszastosują zamierzoną funkcjonalność również do kolumn. Ponadto właściwość ma wpływ tylko na elementy blokowe.

Krótko mówiąc, w szczególności w CSS:
  • widows= minimalna liczba wierszy w akapicie podzielonym na nowej stronie.
  • orphans= minimalna liczba wierszy w akapicie podzielonym na starej stronie.
Czerwone linie to wdowy.

Związane z

  • sieroty

Wsparcie przeglądarki

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.

Pulpit

Chrom Firefox TO ZNACZY Brzeg Safari
25 Nie 8 12 7

Telefon komórkowy / tablet

Android Chrome Android Firefox Android iOS Safari
88 Nie 4.4 7.0-7.1