打印预览时textarea内容截断问题求助（附HTML/CSS代码）

问题根源 #

1. 打印页面方向的CSS写法错误，page-orientation:portrait不是有效语法，浏览器无法识别，导致打印布局混乱。
2. .input-column设置了width:auto !important，在纵向打印时表格列宽会被浏览器重新计算挤压，textarea的100%宽度失去正确的父容器参照。
3. 缺少针对打印场景的表格列宽约束，导致列宽在纵向布局下被压缩，textarea内容被迫换行过多。

修复步骤 #

1. 修正打印页面方向设置

在@media print里替换无效的page-orientation，用标准的@page规则设置纵向：

@media print {
  @page {
    size: portrait; /* 正确设置打印纵向 */
    margin: 1cm; /* 可选：添加页边距避免内容被裁剪 */
  }
  /* 其他原有打印样式... */
}

2. 锁定打印时的表格列宽

给表格列添加固定宽度比例，确保在纵向打印时不会被过度挤压。修改.input-column和列类的打印样式：

@media print {
  /* 确保表格列在打印时保持宽度比例 */
  #tableInfo3 .col0 { width: 5% !important; }
  #tableInfo3 .input-column { width: 25% !important; } /* 根据总列数调整比例，5%+25%*3+20%=100% */
  #tableInfo3 .col1 { width: 20% !important; }

  /* 确保textarea完全填充父容器，强制自动换行 */
  textarea {
    width: 100% !important;
    height: auto !important; /* 取消固定高度，让内容撑开 */
    white-space: pre-wrap !important; /* 强制换行，保留空格 */
    word-wrap: break-word !important; /* 长单词换行 */
  }

  /* 让表格在打印时不超出页面宽度 */
  #tableInfo3 {
    width: 100% !important;
    table-layout: fixed !important; /* 固定表格布局，避免列宽自动调整 */
  }
}

3. 调整自动调整高度的逻辑（可选）

如果textarea的自动高度在打印时失效，确保.auto-resizable容器在打印时保持正确的flex布局：

@media print {
  .auto-resizable {
    display: flex;
    height: auto !important; /* 让容器高度随内容变化 */
  }
}

完整修改后的关键CSS片段 #

@media print {
  @page {
    size: portrait;
    margin: 1cm;
  }

  .print-hidden {
    display: none;
  }

  input[type="date"],
  textarea {
    border: 0px solid black;
    padding: 5px;
    width: 100% !important;
    height: auto !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
  }

  input::placeholder,
  textarea::placeholder {
    display: none !important;
  }

  pre, blockquote {
    page-break-inside: avoid;
  }

  /* 表格列宽锁定 */
  #tableInfo3 {
    width: 100% !important;
    table-layout: fixed !important;
  }

  #tableInfo3 .col0 { width: 5% !important; }
  #tableInfo3 .input-column { width: 25% !important; }
  #tableInfo3 .col1 { width: 20% !important; }

  .auto-resizable {
    display: flex;
    height: auto !important;
  }

  /* 其他原有样式... */
}

额外说明 #

• 使用table-layout: fixed可以强制表格按照设定的列宽比例渲染，避免浏览器根据内容自动调整列宽。
• white-space: pre-wrap和word-wrap: break-word确保textarea里的长内容自动换行，不会因为宽度不足被截断或超出容器。
• 打印时取消textarea的固定高度，让内容自动撑开容器，避免内容被隐藏。

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