Question

下面是我的代码：

<!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>

如果仅将DIV分为2页，我想重新显示DIV。我使用了上面的代码，但无法在打印预览中工作。

Answer 1

我建议使用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>

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

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

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

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

1 个答案: