Geek tričko zdarma Geek tričko zdarma
Tričko zdarma! Stačí před dobitím bodů použít kód TRIKO15. Více informací zde

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í.
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost 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í!