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，因為它可以很容易地循環元素，測量高度等。

我想破壞段落也是可能的，但還有很多額外的工作。