CSS页面布局w / Breaks

Question

我正在尝试创建一个基本上看起来像word文档的网页。将有多个框向下滚动，文本将从一个页面流向另一个页面。

有没有人知道我甚至会在哪里开始？感谢。

编辑：它应该在浏览器中，看起来与此类似：

（忽略列）

Answer 1

CSS主要将样式应用于完整元素，因为它的box model。例外是pseudo elements。因此，要在固定长度后创建适当的中断，您必须将文本分成正确大小的不同元素。

编辑： 可以使用javascript。但即使在最简单的情况下，页面内的所有内容都只作为一个没有子元素的文本元素（甚至不是其他文本元素）提供，代码将成为一个开发的噩梦，并且会运行起来很糟糕。这是因为javascript中没有测量功能。所以你将被迫做出追踪和错误来找到正确的位置来打破元素。由于元素的属性是实时的，这意味着网站的查看者在加载后会看到很多页面的闪烁。如果你敢把html元素中的其他元素放入页面中，你会遇到更多问题。或多或少你会得到数以百计的特殊情况（在其他元素内部，如果这些元素在其他元素内部，则会发生什么）。

Answer 2

<p style="page-break-before: always">This would print on the next page</p>

Answer 3

使用javascript听起来有点像这样的东西，但它取决于你的html的结构以及你是否要打破段落或者如果它不适合将下一段移动到下一页

所以最简单的例子，不要破坏带有平面html结构的段落/ html元素（没有嵌套的div，列等），如：

<div class="document">
  <h1>title</h1>
  <p>texts</p>
  <h2>subtitle</h2>
  <p>texts</p>
  ...
  <p>texts</p>
</div>

会做类似的事情：

height = 0
loop through all direct child elements of .document
{
    if ( (height + element_height) > page_height)
    {
        add page_break_element before current element
        height = 0
    }
    height = height + element_height
}

我使用jquery因为它可以轻松地循环元素，测量高度等。

我想打破段落也是可能的，但还有很多额外的工作。