html - CSS 打印 - 大段落未跨页拆分

标签 html css printing

我有一个 html 页面,我希望打印友好。我以一种我认为对打印机友好的方式设置它,但它似乎不想将一个大段落分成两页,给我留下第一页,上面只有几个元素和一个大空白点在页面的底部,然后是第二页,上面有一个大段落。

这是我的页面的简化版本(原始页面上的大量数据是通过php和mysql数据库等生成的)

https://kronik907.github.io/css-page-break-example/

当您打印该页面时,您可以看到“基本信息”部分跳到第二页,而此时它应该被分为第一页和第二页。

您可以在此处查看原始 html/css:

https://github.com/KroniK907/css-page-break-example/blob/master/index.html

我已经在使用 page-break-inside: auto<p> 上类,但这似乎没有做任何事情。

最佳答案

div.full 选择器中删除 display:inline-block;。将其显示为内联 block 似乎会导致浏览器无法将其分成两半,即使您在父 article 上使用了 page-break-inside

关于html - CSS 打印 - 大段落未跨页拆分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44533045/

相关文章:

javascript - 单击单选按钮调用多个函数

html - 在标签和输入之间填充(类型 ='text' )?

html - 响应式设计问题 - 带有模式弹出窗口

html - 字形不显示但同事有相同的代码

python - "Return"in Function only Returning Value

css - 在 IE9 的打印页面上显示滚动条?

html - 如何对齐多个堆叠表中的列?

javascript - flexslider 单击背景时如何显示我的照片灯箱

java - 为什么我的异常不会打印出它的打印语句? ( java )

html - 如何将另一个 div 中的 2 个 div 对齐到底部和左/右