page-break-inside的替代方法：避免 [英] Alternative for page-break-inside: avoid

问题描述

我有一个产生优惠券的页面。每个优惠券是一个 div ，高度根据内容而变化。我想在每个页面上打印尽可能多的优惠券，但我不想将优惠券分成几页。 CSS属性 page-break-inside 正是我需要的。但是，我需要这个工作在Firefox和/或Chrome。和这不受支持。 两年和一年前问同一个问题，没有什么好的替代品。我们有很多CSS3 / HTML5 /整体浏览器开发进一步...有一个替代方法来获得这个工作吗？

I have a page which generates coupons. Each coupon is a div with a height varying depending on the content. I want to print as many coupons on each page as possible, but I do not want the coupons to be split out over several pages. The CSS property page-break-inside does exactly what I need. However, I need this to work for Firefox and/or Chrome. And this is not supported. Two years and one year ago the same question was asked, and there was no good alternative for this. We are a lot of CSS3/HTML5/overall browser development further... is there an alternative to get this working?

示例如下：
http://jsfiddle.net/e3U66/2/

假设一个页面，打印时，测量1000px。我想要第二个DIV出现在第二页，因为否则它是分裂的第一和第二。此代码适用于Opera，但不适用于FF或Chrome。

Assume that a page, when printed, measures 1000px. I want the second DIV to appear on the second page, because otherwise it is split out over the first and second. This code works in Opera, but not in FF or Chrome.

推荐答案

为什么不在页面加载内容之后，使用js滚动内容， div 。

Why not, after the page is loaded with your content, use js to scroll through the content and add up the height of the divs.

一旦您达到 1000px 或您确定为网页高度的任何内容， div 在最新div之前加上 page-break-before 。

Once you've reached 1000px or whatever you've determined to be the page height, then insert a blank div styled with page-break-before before the latest div.

这篇关于page-break-inside的替代方法：避免的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！