使用 Mozilla Firefox 打印时如何修复页面被切断的问题答案

【问题标题】：How to fix pages cut off when printing use mozilla firefox使用 Mozilla Firefox 打印时如何修复页面被切断的问题
【发布时间】：2019-08-16 14:16:27
【问题描述】：

首先我使用 angular，我创建了用于打印 HTML 的设置，使用 window.print() 和 style.scss 样式。使用 Chrome 浏览器打印时一切正常，但对于 Firefox 浏览器则不然。在firefox上，页面被切断，我需要在哪里更新样式代码来解决这个问题？

我有一个 tableComponent.html + tableComponent.scss 用于我将打印的内容表。我为选定的内容添加了溢出，如下所示：

tableComponent.scss

#selectedHTML {
display: block;
height: 0px;
overflow: visible;
}

但不工作

tableComponent.scss

#selectedHTML {
  display: block;
  height: 0px;
  overflow: visible;
}

但不工作

我希望内容页面不会在 Firefox 上被切断

【问题讨论】：

我建议您设置max-width: 100% 以防止块在最大可见/可打印区域上水平跟随，并强制它正常中断块线。

标签： html css angular

【解决方案1】：

正如我所说，您的问题之一可能是您没有限制容器，或者可能是一个简单的包装问题。

希望对您有所帮助：

示例 CSS：

.border {
    border: 1px solid;
}
.container {
    max-width: 100%;
    overflow: visible;
    /*
      nowrap make it force cut off
      pre-line make it force wapr
    */
    white-space: pre-line;/**/
}    
.border.item {
    min-width: 558px;
    display: inline-block;
    height: 79px;
}

示例 HTML：

  <div class="container">
          <div class="border item" ></div>
          <div class="border item" ></div>
          <div class="border item" ></div>
          <div class="border item" ></div>
          <div class="border item" ></div>
          <div class="border item" ></div>
          <div class="border item" ></div>
          <div class="border item" ></div>
          <div class="border item" ></div>
          <div class="border item" ></div>
          <div class="border item" ></div>
          <div class="border item" ></div>
          <div class="border item" ></div>
          <div class="border item" ></div>
          <div class="border item" ></div>
          <div class="border item" ></div>
  </div>

【讨论】：