Angular页面打印问题：纵向视图右侧内容被截断

先修正核心布局问题 #

你之前加的position: absolute虽然解决了空白问题，但会让组件脱离文档流，打印时无法跟随纸张尺寸自适应，这就是纵向打印内容截断的原因。先把宿主样式改成：

:host {
  overflow: visible;
  position: relative; /* 替换absolute，回归正常文档流 */
  width: 100%;
  box-sizing: border-box;
}

新增打印专属样式（媒体查询） #

针对打印场景单独设置规则，强制内容适配纸张宽度：

@media print {
  /* 确保外层容器和组件占满打印可用宽度 */
  .event-main-container, app-event-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto;
  }

  /* 让长文本/元素自动换行，避免溢出 */
  app-event-container * {
    word-wrap: break-word;
    white-space: pre-wrap;
  }

  /* 重置页面边距，避免内容被打印机裁边 */
  @page {
    margin: 1cm;
  }
}

组件内部内容适配 #

如果组件里有固定宽度的元素，把它们改成自适应宽度：

/* 示例：组件内的内容容器 */
.event-inner-content {
  max-width: 100%;
  width: auto;
  min-width: unset;
}

极端情况的缩放处理（可选） #

如果内容确实无法拆分换行，可以针对纵向打印做适度缩放：

@media print and (orientation: portrait) {
  @page {
    size: portrait;
  }
  body {
    transform: scale(0.85);
    transform-origin: top left;
  }
}

原理：脱离文档流的绝对定位会导致打印引擎无法正确计算组件的实际占用宽度，纵向纸张宽度不足时，超出部分直接被截断。回归相对定位后，容器会跟随父元素和纸张尺寸自适应，再配合打印媒体查询的规则，就能让横竖版打印都完整显示内容。

内容的提问来源于stack exchange，提问作者chopss