我正在try 让谷歌Chrome进行分页.

我通过很多网站被告知,在Chrome中page-break-after: always;是有效的,但是即使举一个非常简单的例子,我似乎也不能让它工作.有没有办法在用Chrome打印时强制换页?

推荐答案

我已经在包括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>

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

Css相关问答推荐

如何将表格单元格的最后一个子级与单元格底部对齐?

向左或向右浮动时的不同图像边距

用两步函数内插的css动画值

如何引用 SCSS 中的现有类?

Nativewind 的某些样式不适用于本机 (Android),但它们适用于网络

图像占用尽可能多的空间但保持宽高比并包含在窗口高度中

如何给三角形添加渐变?

在 WooCommerce 变体 Select 中转换属性文本以大写

tailwind 类的别名?

CSS Stepper - LI After Overlaying LI Before

调整屏幕大小时无法让我的视频背景保持不变

如何更改下拉列表的宽度?

如何通过 JavaScript 重新触发 WebKit CSS 动画?

css 单行或多行垂直对齐

如何知道哪个 HTML 元素导致了垂直滚动条

为什么我的 div 边距重叠,我该如何解决?

模拟显示:React Native 中的内联

在无序列表中的项目之后添加管道分隔符,除非该项目是最后一行

如何在页面上居中 twitter bootstrap 选项卡?

Rails 中正确的 SCSS assets资源 struct