html - 如何解决 CSS page-break-inside : avoid; failing to avoid break?

Question

我正在尝试将网页内容打印到一页纸上。但是，它将内容分成 2 页，所以我在这里做了一些研究，看到有人推荐:

<style type="text/css" media="print">

#my_print_div{
width:940px;
height:770px;
page-break-after: always; /* Always insert page break after this element */
page-break-inside: avoid; /* Please don't break my page content up browser */
}

</style>

<div id='my_print_div'> My content to be printed here</div>

我的 div 仍然中断，然后继续打印下一页 - 除非我在 Mozilla Firefox 中选择“缩小以适合”。

• 有没有办法确保 DIV 的内容不会打印在 2页？我想将内容强制为 1 个可打印页面

• 是否有已知的像素宽度高度匹配横向 11 英寸 x 8.5 英寸字母大小纸？

谢谢

Answer 1

page-break 属性的意义不是缩小内容以适合页面，而是帮助确定发生分页的最佳位置。

所以，如果你在一个元素上使用了page-break-inside:avoid，而当前页面上没有足够的空间来容纳整个元素，浏览器会考虑插入一个中断，以便强制元素到新页面，理论上给它更多空间。

但是，如果元素太大以至于将其移动到新页面上无济于事，则无需执行任何操作(至少在分页符方面)。

如果您事先知道您的内容在打印时需要缩小，您可以尝试在问题元素上添加比例转换(仅限打印媒体类型)，以便它们的尺寸更易于管理。