html - Safari 打印时不显示多列布局

标签 html css printing safari

我正在开发一个需要打印报告的网络应用程序。该报告的建议显示在两列中:

.container {
  column-count: 2;
}
<div class="container">
  <p>recommendation 1</p>
  <p>recommendation 2</p>
  <p>recommendation 3</p>
  <p>recommendation 4</p>
  <!-- repeat many times -->
</div>


这适用于除 Safari 之外的所有浏览器。 Safari 在浏览器中正确布局页面,但否则会回退到单列布局。

我该怎么做才能防止这种行为并使 Safari 在打印时保持多列布局?

注意:我已经通过上面的确切代码验证了这种行为,但显然,如果不将代码粘贴到单独的文件中,就无法对其进行测试。

最佳答案

不幸的是,多列打印布局在 Safari 中不起作用。 See this for the proof .
就我个人而言,我只找到了一种解决方案 - 使用表格,但这需要手动算法将文本拆分为列。

关于html - Safari 打印时不显示多列布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42512320/

相关文章:

html - 在 HTML 中添加背景图像

javascript - 如何在表的第一列和最后一列之间动态添加列

printing - 使用 sed 在分隔符之间打印文本

macos - 更改页面方向不会缩放内容

html - 按钮栏内的文本格式

javascript - 作为参数的匿名函数的作用域

jquery - 带有 Canvas 菜单的动态滚动条

html - 响应式横幅广告

html - <div> 中的垂直对齐 <h2>

swift - Xcode:如何在控制台输出中打印彩色 PRINT 语句?