Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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:

Vlastnost page-break-after v CSS 3 - Ostatní CSS vlastnosti

 

Všechny články v sekci
Ostatní CSS vlastnosti
Článek pro vás napsal Jan Lupčík
Avatar
Autor se primárně věnuje vývoji webových stránek a aplikací v PHP (framework Laravel) a je jedním z herních vývojářů komunitní modifikace TruckersMP.
Aktivity