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-inside - Český CSS 3 manuál

Pomocí CSS 3 vlastnosti page-break-inside nastavujeme zalomení stránky v 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.
  • avoid - Vyhnout se zalomení stránky uvnitř elementu (pokud je to možné).

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

Ukázka

Vytvořme si dva prvky div. Oba budou mít hodnotu vlastnosti page-break-inside nastavenou na avoid. Díky této hodnotě bude každý div na své stránce. Na konci druhé stránky budeme mít tlačítko, které po stisknutí vyvolá akci tisku (pomocí JavaScriptu).

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8" />
                <style>
                @media print
                {
                        div
                        {
                                page-break-inside: avoid;
                        }
                }
                </style>
        <!-- JavaScript -->
                <script type="text/javascript">
                function tisknout()
                {
                        window.print();
                }
                </script>
                <title>page-break-inside</title>
        </head>
        <body>
                <div>
                        <h1>Papír</h1>
                        <p>
                                Papír je tenký, hladký materiál vyráběný zhutněním vlákna.
                                Použitá vlákna jsou obvykle přírodní a založená na celulóze.
                                Nejobvyklejší materiál je buničina vyrobená ze dřeva
                                (většinou smrk), či ze sekundárních vláken (sběrový papír),
                                ale mohou být použity i jiné rostlinné vláknité materiály
                                jako bavlna, a konopí. Teplota vzníceni nad 185 °C.
                        </p>
                        <p>
                                Hromadě několika stovek archů papíru se říká rys papíru (480
                                archů). Papírové archy se mohou chovat jako velmi ostré žiletky
                                a způsobit papírové říznutí.
                        </p>
                        <img src="papir.jpg" alt="Papír" />
                </div>
                <div>
                        <h2>Ruční papír</h2>
                        <p>
                                Papír byl vyráběn původně ze lněného nebo bavlněného odpadu.
                                Se vzrůstající potřebou papíru však bylo potřeba hledat nové
                                technologie, což vedlo k využívání pilin, slámy a starého papíru
                                (jeho využívání vedlo mnohdy k ničení archiválií).
                        </p>
                        <p>
                                Výroba: nabírání papíroviny z kádě na čerpací formu. Původní
                                čerpací formu tvořil laťový rám vyztužený žebry, na kterých bylo
                                upevněno síto. Forma měla dvě části - síto a snímatelný rám -
                                jeho výškou se řídila vrstva papíroviny a tím i gramáž papíru.
                                Formy si mohl papírník vyrábět sám, ale vyráběli je také formaři.
                        </p>
                        <p>
                                Na ručním papíru se objevují stopy síta (žebrování) nazývaný vergé
                                a vodotisky. Objevují se papíry bez stop síta na papíru a bez stop
                                síta v průsvitu - síto bývalo velice husté. Takový papír se nazývá velin.
                        </p>
                </div>
                <button onclick="tisknout()">Tisk</button>
        </body>
</html>

Výsledek:

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