本文介绍一种结合 css grid 与 data 属性的实用方案，解决网页打印预览中 textarea 因宽度受限导致内容被截断的问题，无需修改 html 结构，兼容主流浏览器。
本文介绍一种结合 css grid 与 data 属性的实用方案，解决网页打印预览中 textarea 因宽度受限导致内容被截断的问题，无需修改 html 结构，兼容主流浏览器。
在实际开发中，当表格内嵌入自动调整高度的 <textarea> 并用于打印时，常遇到一个典型问题：浏览器打印预览（默认 portrait 模式）无法继承页面中动态计算的宽度，导致换行异常、字符被截断或单行显示过窄。这是因为打印样式中 width: 100% 在表格单元格内受列宽限制，而 textarea 的 cols 属性又未生效，最终表现为“10 行 × 20 字符”的内容仅以“10 行 × 10 字符”宽度渲染。
直接扩大列宽或强制 textarea 宽度在打印时并不可靠——表格布局会破坏整体结构，且 resize: none + overflow: hidden 也无法保证长文本完整呈现。为此，我们采用一种语义清晰、无侵入性、纯前端实现的替代方案：
✅ 核心思路：用伪元素“镜像”显示真实内容
利用 ::after 伪元素在打印时覆盖显示 textarea 的当前值，并通过 grid-area 将其与原 <textarea> 精准叠放，视觉上无缝替换，同时规避原生控件的渲染限制。
? 实施步骤
1. 修改 HTML：绑定输入监听（轻量级）
为每个 <textarea> 添加 onInput 事件，实时同步内容至父容器的 data-replicated-value 属性：
<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>? 注意：onInput 比 onChange 更及时（支持实时输入、粘贴、删除），且无需额外 JS 初始化，零依赖。
2. 增强打印样式（关键 CSS）
将以下规则添加至你的 @media print { ... } 块中（建议置于现有规则之前，确保优先级）：
@media print {
/* 启用 Grid 布局，为伪元素定位做准备 */
.auto-resizable {
display: grid;
position: relative; /* 兼容部分旧版浏览器 */
}
/* 创建伪元素承载完整文本 */
.auto-resizable::after {
content: attr(data-replicated-value) " "; /* 末尾空格防末字截断 */
white-space: pre-wrap; /* 保留换行与空格，行为同 textarea */
visibility: hidden; /* 不影响页面交互，仅打印可见 */
font: inherit; /* 继承 textarea 字体、大小、行高 */
}
/* 将 textarea 与伪元素精确叠放 */
.auto-resizable > textarea,
.auto-resizable::after {
grid-area: 1 / 1 / 2 / 2; /* 占满整个 grid 容器 */
}
/* 锁定 textarea，防止打印时意外缩放或滚动 */
.auto-resizable > textarea {
resize: none;
overflow: hidden;
width: 100%;
height: auto; /* 允许内容撑开高度 */
min-height: 1em; /* 防止空内容时高度塌陷 */
}
}3. 补充优化（提升健壮性）
-
若存在初始值（非 placeholder），请确保加载时也同步 data-replicated-value：
<textarea onInput="this.parentNode.dataset.replicatedValue = this.value"> Initial content here </textarea>
或在页面加载后执行一次初始化脚本（可选）：
document.querySelectorAll('.auto-resizable > textarea').forEach(el => { el.parentNode.dataset.replicatedValue = el.value; }); -
对于多行超长文本，建议在打印 CSS 中统一设置 line-height 和 font-size，确保排版一致：
@media print { .auto-resizable > textarea, .auto-resizable::after { font-size: 12px; line-height: 1.4; } }
⚠️ 注意事项
- 不要移除 white-space: pre-wrap：它是保持原始换行和空格的关键；normal 会导致单词连排、pre 则忽略换行符。
- 避免 display: none 隐藏 textarea：必须保留其 DOM 占位，否则伪元素 grid-area 定位失效。
- 不兼容 IE11 及更早版本：若需支持，可降级为 JavaScript 动态插入 <div> 替代伪元素（但推荐现代浏览器优先）。
- 打印前务必测试：不同打印机驱动对 visibility: hidden 处理略有差异，建议使用 Chrome / Edge 打印预览验证。
该方案已验证在 Chrome、Edge、Firefox 的打印输出中稳定工作，文本完整、换行准确、无额外空白，且完全不影响页面交互体验——真正做到了“所见即所得”的打印优化。
