CSS嵌套网格打印模式下width:100%失效，A4发票布局异常求助

根据你的描述，核心问题是#invoiceinformation内的文本内容在打印场景下撑破容器，导致横向滚动和布局破损，以下是针对性的解决步骤：

• 强制文本换行与溢出约束
  长文本（尤其是无空格的连续字符、长单词）是打印时撑破容器的常见原因，给#invoiceinformation内的<text>元素或其直接父容器添加以下CSS：

  #invoiceinformation text,
  #invoiceinformation .text-container {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    box-sizing: border-box;
  }
  

  这会强制文本在容器边界处换行，避免超出宽度。

• 锁定打印场景的容器宽度与页面规则
  浏览器打印时会使用独立的样式规则，需明确限制容器在A4范围内：

  /* 定义A4页面尺寸与边距 */
  @page {
    size: A4 portrait;
    margin: 1cm; /* 根据需求调整边距，确保内容在打印区域内 */
  }
  
  /* 打印时强制容器宽度 */
  @media print {
    #invoiceinformation {
      width: 100% !important;
      max-width: calc(210mm - 2cm); /* 减去左右边距的总宽度，和@page的margin对应 */
      box-sizing: border-box;
      overflow-x: hidden; /* 兜底隐藏溢出内容 */
    }
  }
  

• 检查网格布局的列配置
  如果#invoiceinformation是网格容器，避免使用固定列宽或min-content这类会被内容撑开的属性，改用自适应列宽：

  #invoiceinformation {
    display: grid;
    /* 自适应列数，每列最小宽度120px，超出后平分容器 */
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem; /* 保持列间距，避免内容拥挤 */
  }
  

  若为固定列数，确保列宽使用fr单位而非固定像素，让列宽随容器自动调整。

• 排查隐性布局问题
  用浏览器开发者工具切换到「打印媒体模式」（Chrome：更多工具→渲染→模拟CSS媒体类型→print），查看#invoiceinformation及其子元素的计算宽度，确认是否存在：

  • 子元素的padding/margin未被box-sizing: border-box包含
  • 内联元素（如<text>）的默认white-space: nowrap属性未覆盖
  • 父容器的overflow属性未设置为hidden或auto

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