我们正在尝试创建菜单样式布局。我正在使用css-columns属性来实现列的效果。内容是可变的，所以我们希望坚持这个解决方案，因为我们希望浏览器组织内容以获得最佳效果。
在下面的示例中，我们看到Chrome中的一些奇怪行为（版本32.0.1700.77）以及Firefox（版本24.0）中的一些不同（但同样奇怪）的问题，所以我假设它是我们的实现。
在Chrome中，我们看到第一列下面有一个很大的间隙，好像它将第三个LI放在那里开始，然后在渲染过程中的某个点将它移动到第二列的顶部。
在Firefox中，我们看到H3“炒蛋”留在第一列的底部，当第三列LI的其余内容移到第二列的顶部时。
直播示例：http://codepen.io/daviddarnes/pen/BeEIp
思考： - 我们正在使用“break-inside：avoid;”在OL内的每个元素上。这可能导致问题，但我们似乎无法纠正它。 - 基于H3问题......可能与此有关吗？或者这个H3标签附近的元素。
答案 0 :(得分：0)
分页符属性的重点不是缩小内容以适应页面，而是帮助确定分页发生的最佳位置。
所以，如果你使用＆＃39; page-break-inside：避免＆＃39;在一个元素上，当前页面上没有足够的空间来容纳整个元素，浏览器会考虑插入一个中断，以便将元素强制放到一个新页面上，理论上会给它留出更多的空间。
但是，如果元素太大以至于无法将其移到新页面上，那么就没有什么可做的（至少在分页方面）。
如果您事先知道打印时需要缩小内容，可以尝试在问题元素上添加缩放转换（仅限于打印介质类型），这样它们的尺寸更易于管理
这对你有什么帮助吗？