无涯教程网

CSS 打印：避免页面之间的 DIV 被切成两半

发布于05月26日

我正在为一个软件编写一个插件，该软件在Cocoa的WebView中获取大量项目并将它们弹出到HTML中(它使用WebKit作为其呈现程序，因此基本上可以假设这个HTML文件是在Safari中打开的).

它制作的div具有动态高度，但变化不大.它们通常在200像素左右.无论如何，每个文档大约有600个这样的项目，我很难打印出来.除非我走运，否则每页的底部和顶部都有一个条目被切成两半，这使得实际使用打印输出非常困难.

我try 过之前分页、之后分页、内部分页以及三者的组合，但都没有效果.我想可能是WebKit没有正确地呈现说明，或者可能是我对如何使用它们缺乏理解.不管怎样，我需要帮助.如何防止在打印时将div切成两半？

推荐答案

使用break-inside应该可以:

@media print {
  div {
    break-inside: avoid;
  }
}

它适用于all major browsers:

Chrome 50+
边12+
Firefox 65+
歌剧37+
狩猎10+

用page-break-inside: avoid;代替也应该有效，但已经是exactly deprecated乘break-inside: avoid了.

Css相关问答推荐

如何以Angular 调整下拉控件的高度

将CSS更改为Mat-Form-Field，其中包含搜索框

如何在容器查询体中重新定义：Root的CSS自定义属性值？

如何在元素上打孔才能看到下面的背景图像？

在文本之前添加了额外的空间-Angular 树视图CSS

尽管 URL 路径正确，但背景图像未显示

flexbox换行时自动设置高度的原理是什么

当弯曲方向设置为列时如何制作等高卡片？

如何在不使用 sx props 的情况下从 Select 样式中定位 mui paper 组件？

在 React 中使用 CSS 动画 onClick()

css ：：part 伪 Select 器 Chrome 兼容性？

CSS 在具有多个背景图像的元素上过滤一个背景图像

CSS网格使sibling 项目拉伸

为什么 em 不将定义的字体大小加倍？

BEM 块、命名和嵌套

中心表单提交按钮 HTML / CSS

属性nowrap被认为是过时的.建议使用较新的构造.它是什么？

如何隐藏 Chrome 中 HTML5
元素上默认显示的箭头？

将 Web 字体转换和渲染为 base64 - 保持原始外观

如何将 HTML
显示为内联元素？

实用课程推荐

相关教程推荐