如何避免跨页面拆分 HTML 中的 DIV

Question

如何避免跨页面拆分 HTML 中的 DIV

下面是我的代码：

<!DOCTYPE html>
<html>
<head>
<style>
    @media print
    {
      .page-break  { display:block; page-break-inside: avoid;}
    }

} 
</style>    
</head>
<body>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>This is some text.</p>
  <p>---------------------------------------------------------.</p>
<div class="page-break">
  <p>This is some text in a div element.</p>
  <p>This is some text in a div element.</p>
  <p>This is some text in a div element.</p>
  <p>This is some text in a div element.</p>
  <p>This is some text in a div element.</p>
  <p>This is some text in a div element.</p>
  <p>This is some text in a div element.</p>
  <p>This is some text in a div element.</p>
</div>

<p>This is After div..........................</p>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

如果我的 DIV 仅分成 2 页，我想重新显示它。我使用了上面的代码，但在打印预览中不起作用。

Answer 1

Mar*_*han 5

我建议使用 div 作为页面容器，如下所示：

<div class="page">
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    ...
</div>
<div class="page">
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    ...
</div>

Run Code Online (Sandbox Code Playgroud)

这样，就可以按照您认为合适的任何方式操作页面。

.page{
    page-break-inside: avoid;
}

Run Code Online (Sandbox Code Playgroud)

Div 元素已经是display:block默认的，因此在大多数情况下您可以跳过该样式。

归档时间：	7 年，1 月前
查看次数：	2187 次
最近记录：	7 年，1 月前