Er is geen echte page-breakeigenschap in CSS. Het is eigenlijk een set van 3 eigenschappen: page-break-before, page-break-afteren page-break-inside. Deze eigenschappen helpen bepalen hoe het document zich moet gedragen wanneer het wordt afgedrukt. Bijvoorbeeld om een gedrukt document meer boekachtig te maken.
Eigendommen
pagina-einde-ervoor
De page-break-beforeeigenschap voegt een pagina-einde toe vóór het element waarop het wordt toegepast.
Opmerking : deze eigenschap wordt momenteel vervangen door de meer algemene break-beforeeigenschap. Deze nieuwe eigenschap verwerkt ook kolom- en regio-einden terwijl ze syntactisch compatibel is met page-break-before. page-break-beforeControleer daarom voor gebruik of u in break-beforeplaats daarvan kunt gebruiken .
Een veelvoorkomend gebruik hiervan is om het toe te passen op de selector, #commentszodat een gebruiker die een pagina met opmerkingen afdrukt, er gemakkelijk voor kan kiezen om het hele document af te drukken, maar stopt voordat de opmerkingen netjes verschijnen.
pagina-einde-na
De page-break-aftereigenschap voegt een pagina-einde toe na het element waarop het is toegepast.
Opmerking : deze eigenschap wordt momenteel vervangen door de meer algemene break-aftereigenschap. Deze nieuwe eigenschap verwerkt ook kolom- en regio-einden terwijl ze syntactisch compatibel is met page-break-after. page-break-afterControleer daarom voor gebruik of u in break-afterplaats daarvan kunt gebruiken .
pagina-einde-binnen
De page-break-insideeigenschap voegt een pagina-einde toe binnen het element waarop het wordt toegepast.
Syntaxis
page-break-after : auto | always | avoid | left | right page-break-before : auto | always | avoid | left | right page-break-inside : auto | avoidDe leften rightwaarden voor page-break-beforeen page-break-afterverwijzen naar een spread-layout (zoals een boek) met verschillende linker- en rechterpagina's. Ze werken als volgt:
leftdwingt een of twee pagina-einden na het element zodat de volgende pagina wordt opgemaakt als een linkerpagina.rightdwingt een of twee pagina-einden na het element zodat de volgende pagina wordt opgemaakt als een rechterpagina.
Beschouw het alwaysals een combinatie van beide. De specificatie zegt:
Een conforme user-agent kan de waarden 'links' en 'rechts' interpreteren als 'altijd'.
Voorbeeld
@media print ( h2 ( page-break-before: always; ) h3, h4 ( page-break-after: avoid; ) pre, blockquote ( page-break-inside: avoid; ) )Dit codefragment doet drie dingen:
- het dwingt een pagina-einde voor alle
h2koppen (misschien zijn h2-tags in uw document hoofdstuktitels die een nieuwe pagina verdienen) - het voorkomt pagina-einden direct na subtitels omdat dat er vreemd uitziet
- het voorkomt pagina-einden binnen
pretags en aanhalingstekens op blokniveau
Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| Ieder | Ieder | Ieder | 7+ | 4+ | Nader te bepalen | Nader te bepalen |
U kunt afdrukken vanaf mobiele apparaten, zoals AirPrint op iOS, maar we hebben niet zoveel getest. Laat het ons weten als iemand gegevens over ondersteuning heeft.