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

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

 

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