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


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


4280
2017-09-25 10:47


起源

截至2017/08年度,这仍是FF的一个问题。这可能会得到解决 break-after 但是,它尚未在任何浏览器中实现。 - Blauhirn


答案:


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

可以打破分页符的事情是(使用分页内部)

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

要定义是否必须执行中断,应用以下规则:

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

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

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

打破之后 - CSS | MDN

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


12
2017-10-08 20:10





即使使用float元素,Firefox也不能正确分页,所以我并不觉得flex不起作用。资源: CSS Page-Break在所有浏览器中都不起作用

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

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


3
2017-10-08 19:03





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

0
2017-09-25 13:51



不,那不是它。这是一个例子: jsbin.com/tivuzoyeneha/1 - nice ass


word-wrap: break-word;

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


-4
2017-10-08 12:44