page-break-after - Český CSS 3 manuál
Pomocí CSS 3 vlastnosti page-break-after nastavujeme zalomení stránky po elementu při tisku stránky. Pro použití je potřeba základní znalost @media.
Hodnoty
- auto (výchozí) - Zalomení stránky se nastaví automaticky.
- always - Po elementu, který má definovanou vlastnost page-break-after, se zalomí stránka.
- avoid - Vyhnout se zalomení stránky po elementu (pokud je to možné).
- left - Po zalomení stránky po určeným elementu se další elementy vykreslují na další možné levé stránce. Novější prohlížeče tuto hodnotu nepodporují.
- right - Po zalomení stránky po určeným elementu se další elementy vykreslují na další možné pravé stránce. Novější prohlížeče tuto hodnotu nepodporují.
Pro zalomení stránky před elementem při tisku stránky můžeme použít vlastnost page-break-before a pro zalomení stránky uvnitř elementu vlastnost page-break-inside.
Ukázka
Vytvořme si pro ukázku jedno tlačítko, které bude vyvolávat tisknutí (přes JavaScript) a dva tagy div. První bude mít ID pred s hodnotou u vlastnosti page-break-after always, takže tlačítko a druhý div budou na další stránce.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> @media print { #pred { page-break-after: always; } } </style> <!-- JavaScript --> <script type="text/javascript"> function tisknout() { window.print(); } </script> <title>page-break-after</title> </head> <body> <div id="pred">Před tlačítkem</div> <button onclick="tisknout()">Tisk</button> <div>Po tlačítku</div> </body> </html>
Výsledek:
