禁用 textarea 后默认丢失换行和空白符，可通过 CSS 的 white-space: pre-wrap 解决，既保留原始换行与空格，又支持自动折行，确保启用/禁用状态下的视觉与布局（如 scrollHeight）完全一致。
禁用 textarea 后默认丢失换行和空白符，可通过 css 的 `white-space: pre-wrap` 解决，既保留原始换行与空格，又支持自动折行，确保启用/禁用状态下的视觉与布局（如 scrollheight）完全一致。
在 Web 开发中，
根本原因在于：white-space: wrap 并非合法 CSS 值（该写法无效），而原生禁用态 textarea 的 white-space 计算值通常回退为 normal，此时换行符被折叠，仅靠 word-break 或 overflow-wrap 无法恢复语义换行。
✅ 正确解法是显式声明 white-space: pre-wrap（适用于启用与禁用两种状态）：
textarea,
textarea:disabled {
width: 600px;
height: 100px;
white-space: pre-wrap; /* 关键：保留换行 + 自动折行 */
resize: none;
overflow-y: auto;
}
配合以下 HTML 与 JS 即可实现无缝切换：
<textarea wrap="on">1asdfasdf 2afdasdfafdasdfafdasdfaw 3asdfasdf 4asdfasdf</textarea><br><button>Toggle 'disabled'</button>
const textarea = document.querySelector("textarea");
document.querySelector("button").addEventListener("click", () => {
textarea.disabled = !textarea.disabled; // 推荐使用 disabled 属性而非 setAttribute
});
⚠️ 注意事项：
- 避免使用 white-space: pre：虽保留换行，但不自动折行，长行内容会横向溢出容器，破坏布局；
- 不要依赖 wrap="on" 属性：它仅影响表单提交行为，对 CSS 渲染无作用；
- textarea:disabled 选择器必须显式设置 white-space，因为禁用态会覆盖部分默认样式；
- 若需兼容旧版 Safari（
? 扩展对比（推荐按场景选用）：
- pre-wrap：最佳通用方案 —— 保留 \n、空格、制表符，且自动折行；
- pre-line：适合“语义换行+紧凑排版”，自动合并多余空格，仅保留 \n 换行；
- pre：仅用于代码块等需像素级格式还原的场景，无自动折行能力。
通过 white-space: pre-wrap 统一控制启用与禁用状态下的文本渲染逻辑，即可真正实现内容格式零失真、滚动高度稳定、交互体验一致的专业级 textarea 行为。
