禁用 textarea 后换行符消失，是因 white-space: wrap 无效且默认渲染行为导致；正确做法是统一使用 white-space: pre-wrap，既保留原始换行与空格，又支持自动折行，确保启用/禁用状态显示完全一致。
禁用 textarea 后换行符消失，是因 `white-space: wrap` 无效且默认渲染行为导致；正确做法是统一使用 `white-space: pre-wrap`，既保留原始换行与空格，又支持自动折行，确保启用/禁用状态显示完全一致。
在 Web 开发中，<textarea> 元素在启用（enabled）状态下默认会尊重换行符（\n）并按内容自然折行；但一旦添加 disabled 属性，浏览器会切换至“只读展示模式”，此时若未显式指定合适的 white-space 行为，CSS 的默认处理（等同于 white-space: normal）将折叠连续空白符、忽略换行符，导致多行文本被压成单行——这正是问题根源。
关键误区在于：white-space: wrap 并非合法 CSS 值（该值不存在于 CSS 规范中），因此声明无效，浏览器回退至默认行为。真正能同时满足「保留换行符 + 自动折行 + 兼容 disabled 状态」的属性值是：
textarea,
textarea:disabled {
width: 600px;
height: 100px;
white-space: pre-wrap; /* ✅ 核心修复 */
/* 可选：增强可读性 */
overflow-wrap: break-word;
word-break: break-word;
}? pre-wrap 的语义是：保留所有空白字符（空格、制表符、换行符），并在必要时于单词内或单词间自动折行。它完美匹配 <textarea> 的原始语义——用户输入的 \n 被视为真实换行，而非仅用于布局。
完整可运行示例
<textarea>1asdfasdf
2afdasdfafdasdfafdasdfaw
3asdfasdf
4asdfasdf</textarea>
<br/>
<button>Toggle 'disabled'</button>
<script>
const textarea = document.querySelector("textarea");
document.querySelector("button").addEventListener("click", () => {
textarea.disabled = !textarea.disabled; // 推荐写法：直接操作 disabled 属性
});
</script>注意事项与进阶建议
- 避免 removeAttribute("disabled", "disabled")：第二个参数无效，应使用 textarea.removeAttribute("disabled") 或更简洁的 textarea.disabled = false；
- scrollHeight 一致性：pre-wrap 保证内容高度计算逻辑在启用/禁用状态下一致，scrollHeight 不再因换行丢失而突变；
- 无障碍（a11y）提示：禁用态下建议添加 aria-label 或辅助文本说明状态，例如 <button aria-label="切换文本框编辑状态">；
-
对比选择指南：
- 用 pre → 需严格保持源格式（如代码块），但不折行，易溢出容器；
- 用 pre-line → 折行且合并多余空格，适合纯文本摘要类展示；
- 用 pre-wrap → ✅ 推荐默认方案，兼顾换行保真与响应式折行。
通过将 white-space 统一设为 pre-wrap，你无需修改 HTML 结构或 JavaScript 逻辑，即可实现禁用前后视觉、布局、滚动高度的完全一致——这是符合语义化与可维护性的最佳实践。
