Sideskift - CSS-tricks | CSS Almanak 2025

Der er ikke en egentlig page-breakejendom i CSS. Det er faktisk et sæt af 3 ejendomme: page-break-before, page-break-afterog page-break-inside. Disse egenskaber hjælper med at definere, hvordan dokumentet skal opføre sig, når det udskrives. For eksempel at gøre et udskrevet dokument mere boglignende.

Ejendomme

side-break-før

Den page-break-beforeegenskab tilføjer en side-pause før det element, som den er påført.

Bemærk : denne egenskab er ved at blive erstattet af den mere generiske break-beforeegenskab. Denne nye egenskab håndterer også kolonne- og regionskift, mens den er syntaktisk kompatibel med page-break-before. page-break-beforeKontroller derfor, før du bruger det, i break-beforestedet for.

En almindelig brugssag til dette er at anvende den på vælgeren, #commentsså en bruger, der udskriver en side med kommentarer, let kan vælge at udskrive hele dokumentet, men stoppe, før kommentarerne bliver rene.

side-break-after

Den page-break-afteregenskab tilføjer en side-pause efter det element, som den er påført.

Bemærk : denne egenskab er ved at blive erstattet af den mere generiske break-afteregenskab. Denne nye egenskab håndterer også kolonne- og regionskift, mens den er syntaktisk kompatibel med page-break-after. page-break-afterKontroller derfor, før du bruger det, i break-afterstedet for.

side-break-inde

Den page-break-insideegenskab tilføjer en side-pause inde i elementet, som den er påført.

Syntaks

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

Den leftog rightværdier for page-break-beforeog page-break-afterhenvise til en spredning layout (ligesom en bog), hvor der er forskellige venstre og højre sider. De arbejder sådan:

left tvinger en eller to sideskift efter elementet, så den næste side formateres som en venstre side.
right tvinger en eller to sideskift efter elementet, så den næste side formateres som en højre side.

Overvej alwayssom en blanding af begge. Specifikationen siger:

En overholdende brugeragent kan fortolke værdierne 'venstre' og 'højre' som 'altid'.

Eksempel

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

Dette kodestykke gør 3 ting:

det tvinger et sideskift før alle h2overskrifter (måske h2-tags i dit dokument er kapiteltitler, der fortjener en ny side)
det forhindrer sideskift lige efter underoverskrifter, fordi det ser underligt ud
det forhindrer sideskift i pretags og citater på blokniveau