Puslapio pertrauka - CSS-gudrybės

Turinys

page-breakCSS nėra tikros nuosavybės. Tai iš tiesų yra 3 savybės rinkinys: page-break-before, page-break-afterir page-break-inside. Šios savybės padeda apibrėžti, kaip dokumentas turėtų elgtis spausdinant. Pavyzdžiui, kad spausdintas dokumentas taptų panašesnis į knygą.

Savybės

puslapio pertrauka prieš

page-break-beforeNuosavybė prideda page-pertrauka iki elemento, prie kurio ji taikoma.

Pastaba : ši ypatybė yra keičiama bendresne break-beforenuosavybe. Ši nauja ypatybė taip pat tvarko stulpelių ir regionų pertraukas, tuo tarpu sintaksiškai suderinama su page-break-before. Taigi prieš naudodami page-break-beforepatikrinkite, ar galite naudoti break-before.

Dažniausias šio atvejo atvejis yra taikyti jį pasirinkikliui #comments, kad vartotojas, spausdinantis puslapį su komentarais, galėtų lengvai pasirinkti spausdinti visą dokumentą, bet sustoti prieš komentarus švariai.

puslapio pertrauka

page-break-afterNuosavybė prideda page-pertrauka po elemento, prie kurio ji taikoma.

Pastaba : ši ypatybė yra keičiama bendresne break-afternuosavybe. Ši nauja ypatybė taip pat tvarko stulpelių ir regionų pertraukas, tuo tarpu sintaksiškai suderinama su page-break-after. Taigi prieš naudodami page-break-afterpatikrinkite, ar galite naudoti break-after.

puslapis-įsilaužimas

page-break-insideNuosavybė prideda page-skyriklio elemento, prie kurio ji taikoma.

Sintaksė

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

leftIr rightvertės page-break-beforeir page-break-afterkreiptis į skaičiuoklę išdėstymą (pvz knygos) ten, kur skiriasi kairę ir į dešinę puslapius. Jie dirba taip:

  • left priverčia vieną ar dvi puslapių pertraukas po elemento, kad kitas puslapis būtų suformatuotas kaip kairysis puslapis.
  • right priverčia vieną ar du puslapius pertraukti po elemento, kad kitas puslapis būtų suformatuotas kaip dešinysis puslapis.

Apsvarstykite alwaysjų derinį. Specifikacijoje sakoma:

Atitinkantis vartotojo agentas gali interpretuoti reikšmes „kairė“ ir „dešinė“ kaip „visada“.

Pavyzdys

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

Šis kodo fragmentas atlieka 3 veiksmus:

  • tai priverčia pertraukti puslapius prieš visas h2antraštes (galbūt jūsų dokumento h2 žymos yra skyrių pavadinimai, kurie nusipelno naujo puslapio)
  • jis apsaugo puslapių pertraukas iškart po paantraštėmis, nes tai atrodo keista
  • tai apsaugo nuo puslapių pertraukų prežymose ir blokų lygio kabutėse

Naršyklės palaikymas

„Chrome“ „Safari“ „Firefox“ Opera T.Y „Android“ „iOS“
Bet koks Bet koks Bet koks 7+ 4+ TBD TBD

Galite spausdinti iš mobiliųjų įrenginių, pvz., „AirPrint“, naudodamiesi „iOS“, bet mes to dar neišbandėme. Jei kas nors turi duomenų apie palaikymą, praneškite mums.

Įdomios straipsniai...