Prelom stranice - CSS-trikovi

U page-breakCSS-u nema stvarnog svojstva. To je zapravo skup od 3 svojstva: page-break-before, page-break-afteri page-break-inside. Ova svojstva pomažu u definiranju načina na koji bi se dokument trebao ponašati prilikom ispisa. Na primjer, kako bi tiskani dokument bio sličniji knjizi.

Svojstva

prijelom stranice

page-break-beforeNekretnine dodaje stranicu-break prije elementa na koji se primjenjuje.

Napomena : ovo svojstvo je u tijeku i zamijenjeno je općenitijim break-beforesvojstvom. Ovo novo svojstvo također obrađuje prijelome stupaca i regija, dok je sintaksički kompatibilno s page-break-before. Stoga prije upotrebe page-break-beforeprovjerite možete li break-beforeumjesto toga koristiti .

Uobičajeni slučaj za to je njegova primjena na selektor, #commentstako da korisnik koji ispisuje stranicu s komentarima može lako odabrati ispis cijelog dokumenta, ali zaustaviti se prije komentara čisto.

prijelom stranice

page-break-afterNekretnine dodaje stranicu-break nakon elementa na koji se primjenjuje.

Napomena : ovo svojstvo je u tijeku i zamijenjeno je općenitijim break-aftersvojstvom. Ovo novo svojstvo također obrađuje prijelome stupaca i regija, dok je sintaksički kompatibilno s page-break-after. Stoga prije upotrebe page-break-afterprovjerite možete li break-afterumjesto toga koristiti .

proboj stranice

page-break-insideNekretnine dodaje stranicu-break unutar elementa na koji se primjenjuje.

Sintaksa

page-break-after : auto | always | avoid | left | right page-break-before : auto | always | avoid | left | right page-break-inside : auto | avoid

leftI rightvrijednosti za page-break-beforete page-break-afterodnose na izgled širenja (kao knjiga) gdje postoje različita lijeve i desne stranice. Oni rade ovako:

left forsira jedan ili dva prijeloma stranice nakon elementa tako da je sljedeća stranica oblikovana kao lijeva stranica.
right forsira jedan ili dva prijeloma stranice nakon elementa tako da je sljedeća stranica oblikovana kao desna stranica.

Razmotrite alwayskao mješavinu oba. Specifikacija kaže:

Sukladni korisnički agent može vrijednosti "lijevo" i "desno" protumačiti kao "uvijek".

Primjer

@media print ( h2 ( page-break-before: always; ) h3, h4 ( page-break-after: avoid; ) pre, blockquote ( page-break-inside: avoid; ) )

Ovaj isječak koda čini 3 stvari:

prisiljava prijelom stranice prije svih h2naslova (možda su oznake h2 u vašem dokumentu naslovi poglavlja koji zaslužuju novu stranicu)
sprečava prelome stranica odmah nakon podnaslova jer to izgleda neobično
sprečava prelome stranica unutar preoznaka i citata na razini bloka