本文介绍一种结合 css grid 与伪元素的巧妙方案，解决网页打印预览中 textarea 内容被截断的问题——通过 javascript 动态同步内容到 data 属性，并在 @media print 中用 ::after 伪元素完整渲染，确保多行长文本不丢失、不断行、不缩列。
本文介绍一种结合 css grid 与伪元素的巧妙方案，解决网页打印预览中 textarea 内容被截断的问题——通过 javascript 动态同步内容到 data 属性，并在 @media print 中用 ::after 伪元素完整渲染，确保多行长文本不丢失、不断行、不缩列。
在实际打印场景中（尤其是简历、申报表等结构化表格），<textarea> 常因浏览器打印引擎对 rows/cols 的静态解析逻辑而失效：即使用户输入了 10 行 × 50 字符的内容，打印预览却只按初始 rows="3" 和容器宽度强行换行，导致文字被截断或列宽压缩（如原 20 字符宽被压缩为 10 字符），严重影响信息完整性。
标准 CSS 打印样式（如 width: 100%、white-space: pre-wrap）对此问题收效甚微——因为打印布局不继承运行时动态高度，且 textarea 的 scrollHeight 在 @media print 中不可靠。本文推荐一种零依赖、轻量、兼容性好的解决方案：利用 data-* 属性 + ::after 伪元素 + CSS Grid 定位，在打印时「镜像」渲染真实内容。
✅ 核心实现步骤
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 更及时（支持实时输入、粘贴、删除），且无需额外事件监听器，简洁可靠。
2. 增强打印样式：用伪元素接管渲染
将以下 CSS 追加至你的 @media print { ... } 块内（务必放在现有规则之后，确保优先级）：
@media print {
/* 关键：启用 Grid 布局，使 textarea 与伪元素精准叠放 */
.auto-resizable {
display: grid;
position: relative; /* 兼容旧版浏览器定位 */
}
/* 伪元素承载完整文本内容 */
.auto-resizable::after {
content: attr(data-replicated-value) " "; /* 末尾空格防末尾字符被截断 */
white-space: pre-wrap; /* 保留换行与空格，等同 textarea 行为 */
font: inherit; /* 继承 textarea 字体、大小、行高 */
grid-area: 1 / 1 / 2 / 2; /* 覆盖整个父容器区域 */
visibility: hidden; /* 不影响屏幕显示，仅打印时生效 */
padding: 5px; /* 匹配原始 textarea 内边距 */
}
/* 禁用 textarea 自身渲染（打印时隐藏其内容） */
.auto-resizable > textarea {
resize: none;
overflow: hidden;
opacity: 0; /* 彻底隐藏，避免重叠干扰 */
grid-area: 1 / 1 / 2 / 2;
}
/* 可选：确保父容器足够高以容纳全部内容 */
.auto-resizable {
min-height: 60px; /* 根据预期最大行数调整，如 10 行 × 1.5em ≈ 150px */
}
}3. 关键细节说明
为何用 grid-area？
grid-area: 1 / 1 / 2 / 2 将 textarea 和 ::after 精确叠放在同一网格单元，避免因 position: absolute 引发的打印定位偏移（部分打印机驱动对绝对定位支持不稳定）。为何 content 后加 " "？
防止当 textarea 内容以空格结尾时，CSS attr() 读取为空字符串，导致伪元素不渲染。为何设置 min-height？
打印时 .auto-resizable 不再依赖 JS 动态计算高度，需预留足够空间；建议根据 rows 属性估算：min-height: calc(1.5em * N)（N 为最大预期行数）。
✅ 最终效果验证
- ✅ 屏幕浏览：完全无感知，保持原有交互与自适应行为
- ✅ 打印预览：所有 textarea 内容按原始换行与宽度完整呈现，无截断、无压缩
- ✅ 兼容性：支持 Chrome、Edge、Firefox 打印（Safari 需测试，但 ::after + attr() 支持良好）
? 进阶提示：若需支持空 textarea 占位符（如打印时显示 —），可在 onInput 中扩展逻辑：
onInput="this.parentNode.dataset.replicatedValue = this.value || '—'"
此方案规避了复杂 DOM 操作与第三方库依赖，以纯 CSS + 极简 JS 实现「所见即所得」打印体验，特别适用于教育、政务、HR 等对文档准确性要求严苛的场景。
