html - 使用 mozilla firefox 打印时如何修复页面被截断

Question

首先，我使用 angular，我创建了使用 window.print() 打印 HTML 和使用 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 上不会被截断

Answer 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>