Question

这不会在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。为什么呢？

Answer 1

我很确定在Firefox中无法使用。

可以破解分页符的事情是（使用内部分页）

表
浮动元素
内联块元素
带边框的元素

要定义是否必须中断，应用以下规则：

1.如果三个有关值中的任何一个是强制中断值，那就是   总是，左，右，页面，列或区域，它具有优先权。如果   几个有关的价值观是这样一个突破，其中之一   出现在流程中最新的元素（即   break-before值优先于break-after值，即   本身优先于内部价值。）

2.如果有的话   三个有关的值是避免中断值，即避免，   避免页面，避免区域，避免列，将不会应用此类中断   那时候。

一旦施加了强制休息，可以添加软休息时间   需要，但不是在相应的元素边界上解决   避免价值。

break after - CSS | MDN

简而言之，在您的情况下，因为您在flex工作中使用它。

Answer 2

即使使用float元素，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等工具。

Answer 3

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+ */

Answer 4

word-wrap: break-word;

示例：http://jsfiddle.net/yejxaq6h/5/

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

4 个答案: