První novoroční výprodej Java týden
Hledáš brigádu v IT, která bude 100 % home office a 100 % flexibilní? Pak napiš na: redakce [zavináč] itnetwork.cz pro více info!
80 % bodů zdarma díky akci Black Friday! Tento týden rovněž sleva na e-learning Java až 80 %

page-break-before - Český CSS 3 manuál

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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í.
Naši partneři možná hledají právě tebe!

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

 

 

Manuál pro vás napsal Jan Lupčík
Avatar
Autor se primárně věnuje vývoji webových stránek a aplikacích v PHP (speciálně ve frameworku Laravel) a je jedním z vývojářů komunitního módu TruckersMP.
Všechny články v sekci
Ostatní CSS vlastnosti
Aktivity (1)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!