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媒体查询。

问题：打印会导致页面底部的内容被切断/丢失。

理论：

打印：print.window检测页面内容/大小（X）
使用上下文（X）强制纸张页面大小/布局
较小的纸张页面大小会触发CSS媒体查询
布局更改。在我的情况下，bootstrap的col-md-6，删除了浮动。
延长页面（Y）
Y＆gt; X ==＆gt;产生缺失的内容

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

有用的工具： Chrome开发工具＆gt;更多工具＆gt;渲染＆gt;模拟CSS媒体＆gt;打印

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

1 个答案: