Google Chrome Printing Page Breaks

2019-01-02 15:11发布

站内问答 / HTML/CSS
1095 12 4

I'm trying to get google chrome to do page breaks.

I've been told via a bunch of websites that page-break-after: always; is valid in chrome but I can not seem to get it to work even with a very simple example. is there any way to force a page break when printing in chrome?

12条回答
妖精总统
2楼-- · 2019-01-02 15:33

I just wanted to note here that Chrome also ignores page-break-* css settings in divs that have been floated.

I suspect there is a sound justification for this somewhere in the css spec, but I figured noting it might help someone someday ;-)

Just another note: IE7 can't acknowledge page break settings without an explicit height on the previous block element:

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

查看更多
0人赞 添加讨论(0) 举报
残风、尘缘若梦
3楼-- · 2019-01-02 15:33

I had an issue similar to this but I found the solution eventually. I had overflow-x: hidden; applied to the <html> tag so no matter what I did below in the DOM, it would never allow page breaks. By reverting to overflow-x: visible; it worked fine.

Hopefully this helps somebody out there.

查看更多
0人赞 添加讨论(0) 举报
无与为乐者.
4楼-- · 2019-01-02 15:37

It was working for me when I used padding like:

<div style="padding-top :200px;page-break-inside:avoid;">
   <div>My content</div>
</div>
查看更多
0人赞 添加讨论(0) 举报
余欢
5楼-- · 2019-01-02 15:39

I'm having this problem myself - my page breaks work in every browser but Chrome - and was able to isolate it down to the page-break-after element being inside a table cell. (Old, inherited templates in the CMS.)

Apparently Chrome doesn't honor the page-break-before or page-break-after properties inside table cells, so this modified version of Phil's example puts the second and third headline on the same page:

<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>Paginated HTML</title>
    <style type="text/css" media="print">
      div.page
      {
        page-break-after: always;
        page-break-inside: avoid;
      }
    </style>
  </head>
  <body>
    <div class="page">
      <h1>This is Page 1</h1>
    </div>

    <table>
    <tr>
        <td>
            <div class="page">
              <h1>This is Page 2</h1>
            </div>
            <div class="page">
              <h1>This is, sadly, still Page 2</h1>
            </div>
        </td>
    </tr>
    </table>
  </body>
</html>

Chrome's implementation is (dubiously) allowed given the CSS specification - you can see more here: http://www.google.com/support/forum/p/Chrome/thread?tid=32f9d9629d6f6789&hl=en

查看更多
0人赞 添加讨论(0) 举报
明月照影归
6楼-- · 2019-01-02 15:42

I've used the following approach successfully in all major browsers including Chrome:

<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>Paginated HTML</title>
    <style type="text/css" media="print">
      div.page
      {
        page-break-after: always;
        page-break-inside: avoid;
      }
    </style>
  </head>
  <body>
    <div class="page">
      <h1>This is Page 1</h1>
    </div>
    <div class="page">
      <h1>This is Page 2</h1>
    </div>
    <div class="page">
      <h1>This is Page 3</h1>
    </div>
  </body>
</html>

This is a simplified example. In the real code, each page div contains many more elements.

查看更多
0人赞 添加讨论(0) 举报
几人难应
7楼-- · 2019-01-02 15:44

Beware of CSS : display:inline-block when printing.

None of the CCS property to go to next page would work for me in Chrome and Firefox if my table was inside a div with the style display:inline-block

For example, the following doesn't work :

<div style='display:inline-block'>
  <table style='page-break-before:always'>
    ...
  </table>
  <table style='page-break-before:always'>
    ...
  </table>
</div>

But the following work :

<div>
  <table style='page-break-before:always'>
    ...
  </table>
  <table style='page-break-before:always'>
    ...
  </table>
</div>
查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)