Konec stránky - Triky CSS

Anonim

V page-breakCSS není skutečná vlastnost. Je to vlastně sada 3 vlastnosti: page-break-before, page-break-aftera page-break-inside. Tyto vlastnosti pomáhají definovat, jak se má dokument chovat při tisku. Například, aby se tištěný dokument podobal knize.

Vlastnosti

konec stránky

page-break-beforeVlastnost přidá page-break před prvek, na který je aplikován.

Poznámka : tato vlastnost právě nahrazuje obecnější break-beforevlastnost. Tato nová vlastnost také zpracovává zalomení sloupců a oblastí, přičemž je syntakticky kompatibilní s page-break-before. Proto před použitím page-break-beforezkontrolujte, zda můžete break-beforemísto toho použít .

Běžným případem použití je použít jej na selektor, #commentsaby uživatel, který tiskne stránku s komentáři, mohl snadno zvolit tisk celého dokumentu, ale zastavit se před čistým komentářem.

konec stránky

page-break-afterVlastnost přidá page-break po prvku, na který je aplikován.

Poznámka : tato vlastnost právě nahrazuje obecnější break-aftervlastnost. Tato nová vlastnost také zpracovává zalomení sloupců a oblastí, přičemž je syntakticky kompatibilní s page-break-after. Proto před použitím page-break-afterzkontrolujte, zda můžete break-aftermísto toho použít .

konec stránky

page-break-insideVlastnost přidá page-break uvnitř prvku, který je aplikován.

Syntax

page-break-after : auto | always | avoid | left | right page-break-before : auto | always | avoid | left | right page-break-inside : auto | avoid

Hodnoty lefta righthodnot page-break-beforea page-break-afterodkazují na rozložení šíření (jako kniha), kde jsou odlišné levé a pravé stránky. Fungují takto:

  • left vynutí jedno nebo dvě přerušení stránky za prvkem, takže další stránka bude naformátována jako levá stránka.
  • right vynutí jeden nebo dva konce stránek za prvkem, takže další stránka bude naformátována jako správná stránka.

Zvažte to alwaysjako kombinaci obou. Specifikace říká:

Vyhovující uživatelský agent může interpretovat hodnoty „vlevo“ a „vpravo“ jako „vždy“.

Příklad

@media print ( h2 ( page-break-before: always; ) h3, h4 ( page-break-after: avoid; ) pre, blockquote ( page-break-inside: avoid; ) )

Tento fragment kódu dělá 3 věci:

  • vynutí konec stránky před všemi h2nadpisy (značky h2 v dokumentu jsou možná názvy kapitol, které si zaslouží novou stránku)
  • zabraňuje koncům stránek hned po podnadpisech, protože to vypadá divně
  • zabraňuje koncům stránek uvnitř preznaček a uvozovkách na úrovni bloku

Podpora prohlížeče

Chrome Safari Firefox Opera TJ Android iOS
Žádný Žádný Žádný 7+ 4+ Bude upřesněno Bude upřesněno

Můžete tisknout z mobilních zařízení, jako je AirPrint pro iOS, ale moc jsme to netestovali. Pokud má někdo údaje o podpoře, dejte nám vědět.