W page-breakCSS nie ma rzeczywistej właściwości. Właściwie jest to zestaw 3 właściwości: page-break-before, page-break-afteri page-break-inside. Te właściwości pomagają zdefiniować, jak dokument ma zachowywać się po wydrukowaniu. Na przykład, aby wydrukowany dokument był bardziej podobny do książki.
Nieruchomości
podział strony przed
page-break-beforeNieruchomość dodaje page-break przed elementu, do którego jest stosowana.
Uwaga : ta właściwość jest obecnie zastępowana przez właściwość bardziej ogólną break-before. Ta nowa właściwość obsługuje również podziały kolumn i regionów, zachowując zgodność składniową z page-break-before. Dlatego przed użyciem page-break-beforesprawdź, czy możesz użyć break-beforezamiast tego.
Typowym przypadkiem użycia tego jest zastosowanie go do selektora, #commentsaby użytkownik drukujący stronę z komentarzami mógł z łatwością wydrukować cały dokument, ale wyraźnie zatrzymać się przed komentarzami.
podział strony po
page-break-afterNieruchomość dodaje page-break po elemencie, do którego jest stosowana.
Uwaga : ta właściwość jest obecnie zastępowana przez właściwość bardziej ogólną break-after. Ta nowa właściwość obsługuje również podziały kolumn i regionów, zachowując zgodność składniową z page-break-after. Dlatego przed użyciem page-break-aftersprawdź, czy możesz użyć break-afterzamiast tego.
strona-break-inside
page-break-insideNieruchomość dodaje page-break wewnątrz elementu, do którego jest stosowana.
Składnia
page-break-after : auto | always | avoid | left | right page-break-before : auto | always | avoid | left | right page-break-inside : auto | avoidleftI rightwartości dla page-break-beforei page-break-afterodnoszą się do układu spread (jak w książce), gdzie istnieją odrębne lewej i prawej strony. Działają tak:
leftwymusza jeden lub dwa podziały strony po elemencie, tak aby następna strona została sformatowana jako lewa strona.rightwymusza jeden lub dwa podziały strony po elemencie, tak aby następna strona została sformatowana jako prawa strona.
Rozważ alwaysjako połączenie obu. Specyfikacja mówi:
Zgodny klient użytkownika może interpretować wartości „left” i „right” jako „always”.
Przykład
@media print ( h2 ( page-break-before: always; ) h3, h4 ( page-break-after: avoid; ) pre, blockquote ( page-break-inside: avoid; ) )Ten fragment kodu ma 3 funkcje:
- wymusza podział strony przed wszystkimi
h2nagłówkami (być może tagi h2 w twoim dokumencie to tytuły rozdziałów, które zasługują na nową stronę) - zapobiega podziałom stron zaraz po podtytułach, ponieważ wygląda to dziwnie
- zapobiega podziałom stron w
pretagach i cudzysłowach na poziomie bloków
Wsparcie przeglądarki
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| Każdy | Każdy | Każdy | 7+ | 4+ | TBD | TBD |
Możesz drukować z urządzeń mobilnych, takich jak AirPrint na iOS, ale nie testowaliśmy tego zbyt wiele. Jeśli ktoś ma dane dotyczące wsparcia, daj nam znać.