IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
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-before - Český CSS 3 manuál

Pomocí CSS 3 vlastnosti page-break-before nastavujeme zalomení stránky před elementem 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 - Před elementem, který má definovanou vlastnost page-break-before, se zalomí stránka.
  • avoid - Vyhnout se zalomení stránky před elementem (pokud je to možné).
  • left - Vše po elementu včetně něj se vykreslí na další možné levé stránce. Novější prohlížeče tuto hodnotu nepodporují.
  • right - Vše po elementu včetně něj se vykreslí na další možné pravé stránce. Novější prohlížeče tuto hodnotu nepodporují.

Pro zalomení stránky po elementu při tisku stránky můžeme použít vlastnost page-break-after a pro zalomení stránky uvnitř elementu vlastnost page-break-inside.

Ukázka

Vytvořme si jedno tlačítko, které po stisknutí vyvolá tisk stránky (přes JavaScript) a dva elementy div. Druhý bude mít ID druhy s hodnotou u vlastnosti page-break-before always, takže se tento div vykreslí až na druhé stránce.

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8" />
                <style>
                @media print
                {
                        #druhy
                        {
                                page-break-before: always;
                        }
                }
                </style>
        <!-- JavaScript -->
                <script type="text/javascript">
                function tisknout()
                {
                        window.print();
                }
                </script>
                <title>page-break-before</title>
        </head>
        <body>
                <div>Před tlačítkem</div>
                <button onclick="tisknout()">Tisk</button>
                <div id="druhy">Po tlačítku</div>
        </body>
</html>

Výsledek:

Vlastnost page-break-before 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