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页面强制分页打印