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

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

html css

如何避免跨页面拆分HTML中的DIV,html,css,Html,Css,下面是我的代码： <!DOCTYPE html> <html> <head> <style> @media print { .page-break { display:block; page-break-inside: avoid;} } } </style> </head> <body> <p>This is some text.</p&g

下面是我的代码：

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


@媒体印刷品
{
.page break{显示：块；内部分页符：避免；}
}
} 
这是一些文本
这是一些文本
这是一些文本
这是一些文本
这是一些文本
这是一些文本
这是一些文本
这是一些文本
这是一些文本
这是一些文本
这是一些文本
这是一些文本
这是一些文本
这是一些文本
这是一些文本
这是一些文本
这是一些文本
这是一些文本
这是一些文本
这是一些文本
这是一些文本
这是一些文本
这是一些文本
---------------------------------------------------------
这是div元素中的一些文本
这是div元素中的一些文本
这是div元素中的一些文本
这是div元素中的一些文本
这是div元素中的一些文本
这是div元素中的一些文本
这是div元素中的一些文本
这是div元素中的一些文本
这是在div之后

如果我的DIV被拆分为两页，我想显示它。我使用了上面的代码，但没有在打印预览中工作。

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

默认情况下，Div元素已经是

display:block

，因此在大多数情况下，您可以跳过该样式。

将页面拆分为2是什么意思？可能重复：

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