我正试图让谷歌浏览器进行分页.

我通过一堆page-break-after: always;在Chrome中有效的网站被告知,但即使只是一个非常简单的例子,我似乎无法让它工作.有没有办法在使用chrome打印时强制分页？

1> Phil Ross..：

---

我在包括Chrome在内的所有主流浏览器中都成功使用了以下方法:

  
    
    
    
  
  
    

      
This is Page 1
    
    

      
This is Page 2
    
    

      
This is Page 3
    
  

这是一个简化的例子.在实际代码中,每个页面div包含更多元素.

---

根据规范`break-after`和`break-before`仅适用于`块级元素,表行组,表行(但参见散文)`:https://drafts.c​​sswg.org/css-break- 3 /#break-between - 这意味着没有花车或任何花哨的定位技巧.

---

啊,我认为我的问题.我试图用一个标签来使用它

2> Peter..：

---

实际上,选择接受的答案中缺少一个细节(来自Phil Ross)....

它DOES在Chrome中工作,解决的办法是真的傻!

必须将父控件和要控制分页的元素声明为:

position: relative

看看这个小提琴:http: //jsfiddle.net/petersphilo/QCvA5/5/show/

这适用于:

page-break-before
page-break-after
page-break-inside

但是,在Safari中控制分页内部功能不起作用(至少在5.1.7中)

我希望这有帮助!!!

PS:下面的问题提出了这样一个事实,即最近版本的Chrome不再尊重这一点,即使是位置:相对; 特技.但是,他们似乎确实尊重:

-webkit-region-break-inside: avoid;

看到这个小提琴:http: //jsfiddle.net/petersphilo/QCvA5/23/show

所以我想我们现在必须加上......

希望这可以帮助!

3> fordareh..：

---

我只想在此注意,Chrome也忽略了已经浮动的div中的page-break-*css设置.

我怀疑在css规范的某个地方有一个合理的理由,但我想有一天它可能会帮助某人;-)

另一个注意事项:如果前一个块元素没有明确的高度,IE7无法确认分页设置:

http://social.msdn.microsoft.com/forums/en-US/iewebdevelopment/thread/fe523ec6-2f01-41df-a31d-9ba93f21787b/

---

可能因为浮动一个元素将它从文档流中取出,就像绝对定位一样.具有position:absolute的元素将不适用于page-break-*.

4> davidbehan..：

---

我遇到了类似的问题,但我最终找到了解决方案.我有溢出-x:隐藏; 应用于标签,所以无论我在DOM下面做了什么,它都不会允许分页.通过恢复溢出-x:可见; 它工作得很好.

希望这有助于那里的人.

5> Nate Cook..：

---

我自己也遇到了这个问题 - 我的页面在每个浏览器中都有效,但是Chrome - 并且能够将其分离到表格单元格中的分页符元素.(CMS中旧的,继承的模板.)

显然Chrome不支持表格单元格中的page-break-before或page-break-after属性,因此Phil的示例的这个修改版本将第二个和第三个标题放在同一页面上:

  
    
    
    
  
  
    

      
This is Page 1
    

    

    

        

            

              
This is Page 2
            
            

              
This is, sadly, still Page 2
            
        
    
    
  

根据CSS规范,Chrome的实施(可疑)是允许的 - 您可以在此处看到更多信息:http://www.google.com/support/forum/p/Chrome/thread？tid = 32f9d9629d6f6789&hl = zh-CN

6> Gudradain..：

---

小心CSS:display:inline-block打印时.

如果我的表位于带有样式的div中,那么转到下一页的CCS属性都不适用于Chrome和Firefox display:inline-block

例如,以下内容不起作用:

  
    ...
  
  
    ...
  

但是以下工作:

  
    ...
  
  
    ...
  

---

与`display：flex`相同