html - Chrome 打印正在切断多列 css 的 tr 元素之间的文本

Question

如何防止这种行为？

https://plnkr.co/edit/QoO2hWmXVhSCSyA4bUh4?p=preview

<style type="text/css">
            table {
                border-collapse: collapse;
            }

            table, th, td {
                border: 1px solid black;
            }
            @page {
                size: auto;   /* auto is the initial value */
                margin: 5mm 7mm 5mm 7mm; /* margin you want for the content */
            }

            html {
                background-color: #FFFFFF;
                margin: 0px; /* this affects the margin on the html before sending to printer */
            }
            table { page-break-inside: avoid }
            tr    { page-break-inside: avoid; page-break-after: avoid }
            thead { display: table-header-group }
            tfoot { display: table-footer-group }
            .paper {
                font-size: 11pt;
                -webkit-print-color-adjust: exact;
                -moz-column-count: 2;
                -moz-column-gap: 10px;
                -webkit-column-count: 2;
                -webkit-column-gap: 10px;
                column-count: 2;
                column-gap: 10px;
            }

            .website {
                font-size: 11pt;
                -webkit-print-color-adjust: exact;
                -moz-column-count: 2;
                -moz-column-gap: 10px;
                -webkit-column-count: 2;
                -webkit-column-gap: 10px;
                column-count: 2;
                column-gap: 10px;
            }

            .inline {
                -webkit-print-color-adjust: exact;
                display: inline-block;
                width: 100%;
            }

            .customer-color {
                -webkit-print-color-adjust: exact;
                background-color: rgba(38, 194, 129, 0.1);
            }

            .partner-color {
                -webkit-print-color-adjust: exact;
                background-color: rgba(227, 91, 90, 0.1);
            }
        </style>

这是我的 CSS 样式。您可以尝试从 plunkr 打印并会看到这种情况发生， 我已经尝试了以下帖子中的解决方案，Why is Chrome cutting off text in my CSS3 multi-column layout?但无法解决问题。该帖子似乎是 2010 年的，所以 2016 年可能有新的解决方案？

Answer 1

我遇到了类似的问题，也许这可能会有所帮助。检查您的 CSS 媒体查询。

问题:打印导致页面底部的内容被截断/丢失。

理论:

1. 打印:print.window 检测页面内容/大小 (X)
2. 使用上下文 (X) 强制纸张页面大小/布局
3. 较小的纸张页面尺寸会触发 CSS 媒体查询
4. 布局变化。在我的例子中，bootstrap 的 col-md-6，删除了 float 。
5. 拉长页面(Y)
6. Y>X ==> 产生缺失的内容

我的解决方案是处理@media 查询以保持我预期的布局。

有用的工具:Chrome 开发工具>更多工具>渲染>模拟 CSS 媒体>打印