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

HTML a CSS Manuál Ostatní vlastnosti 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

 

  Aktivity (1)

Manuál pro vás napsal IT Man
Avatar
Autor se primárně věnuje vývoji webových stránek v PHP a v JavaScriptu (knihovna jQuery). Napsal část manuálu HTML 5 a CSS 3, kde má celkem velký přehled. Jednoduše má v oblibě weby.

Miniatura
Všechny články v sekci
Ostatní CSS vlastnosti

 

 

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í!