page-break-after 在 flexbox 中不起作用

Posted

技术标签:

【中文标题】page-break-after 在 flexbox 中不起作用【英文标题】:page-break-after not working in flexboxes 【发布时间】:2014-11-20 02:43:09 【问题描述】:

这不会在 Firefox 的打印预览中产生预期的结果:

<aside>
  side
</aside>

<div>
  <p> page 1 </p>
  <p> page 2 </p>
</div>

CSS:

body
  display: flex;


aside
  flex: none;
  width: 100px;


div
  flex: auto;


p
  break-after: always;
  page-break-after: always;

在 Chrome 和 IE 中,我应该得到 2 个页面。当祖先是弹性框时,FF 似乎不会在 2 页中破坏 div。为什么?

【问题讨论】:

截至 2017/08 年,这仍然是 FF 中的一个问题。这可能会通过break-after 得到解决,但尚未在任何浏览器中实现。 【参考方案1】:
word-wrap: break-word;

例如:http://jsfiddle.net/yejxaq6h/5/

【讨论】:

【参考方案2】:

我很确定这在 Firefox 中不起作用。

可以打破分页符的是(使用分页符里面)

表格 浮动元素 内嵌块元素 带边框的块元素

要定义是否必须休息,应用以下规则:

1.如果三个相关值中的任何一个是强制中断值,即 always、left、right、page、column 或 region,它具有优先权。如果 几个有关的值就是这样一个突破,其中之一 采用流中最新出现的元素(即 break-before 值优先于 break-after 值,后者 本身优先于 break-inside 值)。

2.如果有任何 三个关注值是一个避免中断值,即避免, 避免页面,避免区域,避免列,不会应用这样的中断 那时。

一旦应用了强制中断,可以添加软中断,如果 需要,但不是在相应的元素边界上解决 避免价值。

break after - CSS | MDN

简而言之,在您的情况下,因为您在 flex 中使用它是行不通的。

【讨论】:

【参考方案3】:

即使使用浮动元素,Firefox 也不能正确地进行分页,所以我对 flex 不起作用并不感到惊讶。来源:CSS Page-Break Not Working in all Browsers

一般来说,Firefox 的分页支持不是很好。见:https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after

如果您需要一致的跨浏览器打印结果,答案几乎总是使用服务器端 PDF 生成,使用 wkhtmltopdf 或 Princexml 之类的工具。

【讨论】:

【参考方案4】:
display: flex;

是一个默认情况下不兼容跨浏览器的属性。

如果您有一个示例或详细说明您想要实现的目标会很有帮助,但我认为这会奏效:

display: -webkit-box; /* OLD - ios 6-, Safari 3.1-6 */
display: -moz-box;/* OLD - Firefox 19- (buggy but mostly works)*/
display: -ms-flexbox;/* TWEENER - IE 10 */
display: -webkit-flex;/* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */

【讨论】:

以上是关于page-break-after 在 flexbox 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

Phantomjs page-break-after:总是创建空格

page-break-before和page-break-after

应用CSS的page-break-after属性 实现WEB页面强制分页打印

HTML网页打印 style="page-break-after:always;" 总有一张空白页

@media print样式 关于table断页

深度嵌套的 flexbox 布局会导致性能问题吗?