css - page-break-inside : avoid 的替代方案

标签 css printing printing-web-page

我有一个生成优惠券的页面。每张优惠券都是一个 div,其高度因内容而异。我想在每一页上打印尽可能多的优惠券,但我不希望优惠券被分成几页。 CSS 属性 page-break-inside 正是我所需要的。但是,我需要它才能在 Firefox 和/或 Chrome 上工作。和 this is not supported . Two yearsone year ago问了同样的问题,对此没有好的选择。我们正在进一步开发大量 CSS3/HTML5/整体浏览器...是否有其他方法可以使它正常工作?

例子在这里: http://jsfiddle.net/e3U66/2/

假设页面在打印时尺寸为 1000 像素。我希望第二个 DIV 出现在第二页上,否则它会在第一页和第二页上分开。此代码适用于 Opera,但不适用于 FF 或 Chrome。

最佳答案

为什么不呢,页面加载完你的内容后,用js滚动内容,把div的高度加起来。

一旦达到 1000px 或您确定的任何页面高度,然后插入一个空白 div 样式为 page-break-before 在最新的 div 之前。

关于css - page-break-inside : avoid 的替代方案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6104622/

相关文章:

css - 将 div 的内容放在一起以便在 IE8 中打印

css - 如何使网站的打印版本不受屏幕尺寸的影响?

jquery - 在页面加载时保持树状菜单打开

javascript - 可视化调色板查询javascript circosjs

windows - Windows "FILE:"端口的一个版本,它不提示输入文件名但会自动生成一个

html - thead 不在 IE9 的每一页上打印

javascript - 当鼠标悬停在任意按钮上时执行一个函数

html - 是否可以在有 Angular 形式内放置粘性 div?

android - 在android中打印时如何更改字体大小?

css - 在横向模式下打印时如何删除左栏