How would I make overflow content carry over to a new div?

Question

I'm trying to have content that looks like pages, similar to viewing a pdf, but not actually making a pdf. So basically, I have a div that's styled like this:

.page {
    background: white;
    width: 8.5in;
    height: 11in;
    box-shadow: 3px 2px 10px #444;
    margin: auto;
    padding: .5in;
}

I know that css can set what happens to overflow within divs (hide it, scroll it, etc.). Is there an easy way to make overflow come up in a new, similarly styled div? Or maybe a library that can do this?

Answer 1

You aren't going to be able to use only CSS to do this, I'm afraid – if you have a good idea of what your content will look like, you'll need to use JavaScript (or some other server-side templating) to break up your content into div s; CSS can't do it for you. How are you populating the page that you're styling? I'd recommend breaking it up into div elements before you style them, but I don't know if it's practical.

Also, for what it's worth, it's not recommended to use absolute measurements like "inches" for content that could be changed on the client side, where users are free to change font faces, sizes, margins, and whatnot. Pages will look different to different users; all you have to do is zoom in on a page to see how things move around at different "magnifications."

"Inches" on a web page wouldn't really translate into "pages" in real life – are people going to be printing this out, or just viewing it online like a piece of paper? If they aren't printing it, you can style it however you'd like, which would be much simpler.

Answer 2

Try this:

.page {
  width: 45em; 
  word-wrap: break-word;
}