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

【问题标题】：page-break-after not working in flexboxespage-break-after 在 flexbox 中不起作用
【发布时间】：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 得到解决，但尚未在任何浏览器中实现。

标签： css firefox printing flexbox page-break

【解决方案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+ */

【讨论】：