CSS页面布局w / Breaks

Question

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

有谁知道我甚至会在哪里开始？ 谢谢。

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

（忽略列）

Answer 1

由于其盒子模型， CSS主要将样式应用于完整元素。 例外是伪元素 。 因此，要在固定长度之后创建适当的中断，您必须将文本分成正确大小的不同元素。

编辑：可以使用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，因为它可以很容易地循环元素，测量高度等。

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