将HTML页面拆分为定义的宽度和高度部分

Question

我有一个大的<div> s的列表，每个高度可变，但宽度固定。该列表看起来有点像这样：

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. 

我想这个列表划分到几个“页”和“分页符”，分页（每个相同的HTML页面上，虽然），每一个固定高度。我不想将长段落分割成不同的页面，除非每页上只有一个项目。我会如何去做这件事？我认为jQuery可能是必不可少的，这很好，因为我怀疑它可能仅在CSS中。

我这样做是因为我想将它变成一个PDF，这似乎是最好的方式来做到这一点。

Answer 1

类似的帖子：alternative to page-break-inside:avoid because of compatibility issues

我尝试之前找到这个优雅的CSS的解决方案，但都无济于事。如果上述链接不起作用，则编写一个脚本来计算每个段落的高度（包括间距），并相应地将它们合并到代表页面长度的固定高度div中。