打印时 textarea 因宽度受限导致多列文本换行错乱、内容被截断，本文提供基于 css grid 与 data 属性的优雅解决方案，无需修改 html 结构，兼容主流浏览器。
打印时 textarea 因宽度受限导致多列文本换行错乱、内容被截断，本文提供基于 css grid 与 data 属性的优雅解决方案，无需修改 html 结构，兼容主流浏览器。
在网页打印（尤其是 @media print）场景下，textarea 常因继承父容器窄宽（如表格列固定宽度）而无法完整显示长行文本——即使设置了 rows="10"，实际打印时每行仅能容纳约 10~15 个字符，远低于屏幕显示效果。根本原因在于：打印样式中 textarea 的 width: 100% 被其父 直接增大列宽或设置 min-width 并不可靠：表格布局在打印时受纸张尺寸、浏览器分页算法及默认 portrait 模式制约，硬性拉伸易引发错位或跨页断裂。更稳健的思路是——绕过 textarea 渲染本身，在打印时用纯文本“覆盖层”替代其视觉输出。 该方案不依赖第三方库，仅需微小 JS 绑定与精准 CSS 控制，核心思想是： 1. 修改 HTML —— 为每个 textarea 添加 onInput 监听 ✅ 注意：onInput 比 onChange 更及时，支持实时输入、粘贴、删除等所有编辑行为。 2. 更新 CSS —— 在 @media print 块内追加以下规则 ⚠️ 注意事项： 3. 验证效果 此方案以最小侵入性解决了一个长期困扰 Web 打印开发者的布局陷阱，兼顾语义清晰性、维护性与跨浏览器稳定性。无需重写表格结构，亦不依赖服务端渲染，是现代前端打印优化的务实之选。 或 .input-column 的窄宽限制，且 white-space: normal 会强制折行，破坏原始排版逻辑。 ✅ 推荐方案：CSS Grid + data 属性动态同步
? 实施步骤
<td class="input-column">
<div class="auto-resizable">
<textarea rows="3" placeholder="Master of Computer Science (Software Engineering and Intelligence)" oninput="this.parentNode.dataset.replicatedValue = this.value"></textarea>
</div>
</td>
<!-- 其他 textarea 同理添加 onInput -->
@media print {
/* ...原有打印样式保持不变... */
/* 关键：启用 Grid 布局，使伪元素可精确定位 */
.auto-resizable {
display: grid;
position: relative; /* 确保伪元素相对定位生效 */
}
/* 打印时显示完整文本内容 */
.auto-resizable::after {
content: attr(data-replicated-value) " "; /* 末尾空格防末字截断 */
white-space: pre-wrap; /* 保留换行与空格，模拟 textarea 行为 */
font: inherit; /* 继承字体、大小、行高，保证一致性 */
visibility: visible; /* 显式设为可见（避免被其他规则覆盖） */
grid-area: 1 / 1 / 2 / 2; /* 占满整个 grid 容器区域 */
}
/* 隐藏原 textarea，仅保留文本层 */
.auto-resizable > textarea {
resize: none;
overflow: hidden;
opacity: 0; /* 彻底隐藏，避免干扰 */
grid-area: 1 / 1 / 2 / 2;
}
/* 可选：增强可读性，如需打印时显示边框 */
.auto-resizable::after {
padding: 5px;
border: 1px solid #000;
}
}
document.querySelectorAll('.auto-resizable textarea').forEach(el => {
el.parentNode.dataset.replicatedValue = el.value;
});
打开浏览器打印预览（Ctrl+P），确认：
? 进阶建议
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
