求助：仅用CSS实现textarea内容完整打印的解决方案

嘿，我之前也踩过textarea打印截断的坑，浏览器对表单控件的打印渲染确实有点“固执”，给你几个亲测有效的方案：

方案1：临时替换为div（最稳定） #

textarea作为表单控件，浏览器打印时会优先遵循其默认的表单渲染规则，哪怕加了!important也可能不生效。最稳妥的办法是打印前把textarea的内容转移到一个普通div里——div是块级元素，会自动撑开高度适配内容：

步骤： #

1. 给你的textarea加个类名，方便后续操作：

<textarea class="original-textarea" rows="5">你的大段文本内容...</textarea>

2. 添加打印专用的CSS：

@media print {
  .print-textarea {
    display: block;
    width: 100%;
    white-space: pre-wrap; /* 保留原文本的换行和空格格式 */
    padding: 0.5em; /* 模拟textarea的内边距 */
    border: 1px solid #ccc; /* 可选，还原textarea的边框样式 */
  }
  .original-textarea {
    display: none; /* 打印时隐藏原textarea */
  }
}

3. 用JS在打印前后处理内容：

// 打印前生成临时div并复制textarea内容
window.addEventListener('beforeprint', () => {
  const textareas = document.querySelectorAll('.original-textarea');
  textareas.forEach(textarea => {
    const printDiv = document.createElement('div');
    printDiv.className = 'print-textarea';
    printDiv.textContent = textarea.value;
    textarea.parentNode.insertBefore(printDiv, textarea);
  });
});

// 打印完成后移除临时div，恢复页面原样
window.addEventListener('afterprint', () => {
  document.querySelectorAll('.print-textarea').forEach(el => el.remove());
});

方案2：强制覆盖textarea的所有限制 #

如果不想用JS替换，可以尝试更激进的CSS规则，覆盖所有可能限制尺寸的属性：

@media print {
  /* 先调整页面边距，避免内容被页面边缘截断 */
  @page {
    size: auto;
    margin: 0.8cm;
  }

  textarea {
    height: auto!important; /* 让高度自适应内容 */
    width: 100%!important;
    overflow: visible!important;
    white-space: pre-wrap!important; /* 确保换行正常显示 */
    resize: none!important; /* 禁用调整大小功能 */
    border: none!important; /* 可选，去掉边框让打印更清爽 */
    box-shadow: none!important;
    min-height: unset!important; /* 清除可能的最小高度限制 */
    max-height: none!important; /* 清除最大高度限制 */
  }

  /* 重点检查父容器！如果父元素有固定高度或overflow:hidden，也要一并修改 */
  .textarea-parent {
    height: auto!important;
    overflow: visible!important;
  }
}

注意：有些浏览器（比如Chrome）对表单控件的打印样式限制很严，这个方法可能在部分浏览器不生效。

方案3：调整浏览器打印设置 #

有时候问题出在浏览器的默认打印配置上：

• 打开打印预览后，取消“缩小内容以适应页面”选项
• 选择正确的纸张尺寸，确保内容不会被强制缩放截断

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