0

I have a list of large <div>s, each of variable height, but fixed width. The list looks a bit like this:

1.  Heading
    This is a short paragraph. It doesn't contain very many sentences.

2.  Heading
    Now this paragraph, THIS one, is quite long. It could be over 10 lines in
    length. It might be even longer. Now this paragraph is aimless and going
    nowhere and I'm annoying the good folks on Stack Overflow because they might
    actually be helping me, and reading this is boring.






----------------------------------- Page Break ----------------------------------

3. Heading
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sapien
   orci, fermentum ac pellentesque quis, pretium at odio. Fusce quis dignissim
   nisi. Ut rhoncus tortor ut diam aliquam auctor ullamcorper vitae urna.
   Pellentesque elementum urna sed quam vehicula et elementum orci accumsan.
   Nullam feugiat tempor ipsum et rhoncus. Maecenas ultrices, sem a posuere
   pharetra, mi lorem rhoncus dolor, ac consectetur mauris tortor quis nulla.
   Mauris consequat tincidunt nibh, consectetur adipiscing erat vulputate ac.





----------------------------------- Page Break ----------------------------------

4. Heading
   Sed magna mi, egestas non imperdiet id, interdum nec quam. Nullam et libero
   a urna convallis congue ac ut tellus. Aliquam in erat metus. Sed tempus,
   ipsum ut vehicula convallis, massa neque faucibus est, quis cursus dolor
   feliset dolor. Vivamus ultrices odio purus, vitae condimentum mi. Aenean
   lacus dui, pellentesque vestibulum pretium sed, cursus non metus. Praesent
   quis velit a lacus commodo adipiscing. Donec sollicitudin arcu quis est
   faucibus malesuada. Curabitur sem quam, accumsan sed tempor sed, tincidunt
   imperdiet nisl. Fusce non malesuada elit. Donec dolor eros, lacinia ut tempus
   dictum, mi elementum elementum feugiat, metus augue dapibus felis, eget
   pharetra lectus elit quis sapien. Nulla ullamcorper, elit in sodales
   tincidunt, purus nisi venenatis sem, sit amet blandit nisl lorem non velit.
   Nullam vulputate, dui auctor consectetur pellentesque, est nibh vulputate
   eros, non egestas ante nunc a dui. Donec porta mollis pharetra. Quisque ut
   nisl turpis. Maecenas et sem a magna lacinia porta nec non nulla.
   Vestibulum sed justo sit amet lorem consectetur auctor eu nec neque.
   Curabitur dignissim pellentesque sollicitudin. Sed mattis arcu justo.
   Nunc in felis elit.

I want to separate this list onto several "pages" with "page breaks", pagination, (each on the same HTML page, though), each of a fixed height. I do not want the long paragraphs to be split across pages, unless there's only one item on each page. How would I go about doing this? I'm thinking jQuery might be essential, which is fine, because I doubt it's possible in CSS alone.

I'm doing this because I want to turn it into a PDF and this seems the best way to do that.

Alfo
  • 4,801
  • 9
  • 38
  • 51
  • Can you provide some visual examples. I'm still unclear on what you are asking. – Glenn Dayton Aug 23 '12 at 17:54
  • He wants to have some way to prevent page break from his paragraph's content. So when printing, or converting to PDF, his Nth paragraph won't be in multiple pages (assuming a paragraph can always fit into one page) – Jason Aug 23 '12 at 18:02
  • I've added some more more visual description for you – Alfo Aug 23 '12 at 18:07
  • HTML is not the best way to make a pdfs, do you need to do this one time? or will the html be changing all the time? (is this documentation or something?) – nycynik Aug 23 '12 at 18:09
  • No it's not static - I'm dynamically generating the list from a database, which is why I don't know the heights of the paragraphs. – Alfo Aug 23 '12 at 18:14

1 Answers1

1

A similar post: alternative to page-break-inside:avoid because of compatibility issues

I try to find an elegant CSS solution for this before, but to no avail. If the above link doesn't work write a script to compute the height of each paragraph (including spacing) and fit accordingly into a fixed height divs that represent a page long.

Community
  • 1
  • 1
Jason
  • 848
  • 6
  • 17