CSS break-after

The CSS break-after property specifies whether or not a page break should occur after an element. It is used to control the flow of content when printing a document or generating a PDF.

The possible values for break-after are auto, always, avoid, left, right, recto, verso, and page. Let's see how each value works with some examples:

Result:


            <div style="break-after: auto;">Content 1</div>
            <div style="break-after: always;">Content 2</div>
            <div style="break-after: avoid;">Content 3</div>
            <div style="break-after: left;">Content 4</div>
            <div style="break-after: right;">Content 5</div>
            <div style="break-after: recto;">Content 6</div>
            <div style="break-after: verso;">Content 7</div>
            <div style="break-after: page;">Content 8</div>

In the example above, we have different div elements with different values for break-after applied. When you view this in a print preview or generate a PDF, you will see how the content is affected based on the break-after property.

Remember to always test your CSS properties in different browsers to ensure cross-browser compatibility.