CODEWITHSUNDEEP
htmlcssprinting
Jonathan Lam
Jonathan Lam

Reputation: 17351

Horizontal page-break-inside?

I have a very wide <div> scaled in mm.

It's something around 1000mm wide (3-4 pages wide, each 210mm wide).

The browser automatically scales everything so that its width fits inside one page, but I want it to be broken up over multiple pages horizontally.

———————————————————— actual content width
———— page width

———— current printed content (squished)
———— page width

———— ———— ———— ———— ———— desired printed content (spread)
———— page width

I've tried using page-break-inside: auto, but it seems that it works only for vertical page breaks.

Is there any way I can do this (using CSS, plain HTML, or maybe even JS)? Thanks.

Upvotes: 2

Views: 1287

Answers (2)

musafar006
musafar006

Reputation: 989

I am not sure whether you're looking for something like this JSFiddle.

I've used div and span; and used :before and :after pseudo-classes

Edit: If you want the line to be visible only on the left, remove :after

Upvotes: 1

Johannes
Johannes

Reputation: 67768

Although there ARE a lot of options for page size etc. (see http://www.w3.org/TR/css3-page/), horizontal page breaks don't seem to be possible.

However, you could go for an approach similar to responsive design in the @print section of your stylesheet: Try to organize your display, float and similar parameters in a way that they appear horizontally on the screen, but vertically in the print styles.

Upvotes: 2

Related Questions