通过设置 white-space: pre-wrap 可解决 disabled textarea 丢失换行和空白符的问题，确保启用/禁用状态下的视觉表现与滚动高度（scrollHeight）完全一致。
通过设置 `white-space: pre-wrap` 可解决 disabled textarea 丢失换行和空白符的问题，确保启用/禁用状态下的视觉表现与滚动高度（scrollheight）完全一致。
在 Web 开发中，<textarea> 元素默认会保留用户输入的换行符（\n）和空格，并在启用状态下正确渲染为多行文本。但一旦添加 disabled 属性，浏览器会以“只读展示”模式渲染该控件，此时若未显式指定合适的 CSS white-space 值，换行符将被忽略，所有内容坍缩为单行——这不仅破坏可读性，还会导致 scrollHeight 突然变小，影响布局稳定性。
根本原因在于：white-space: wrap 是一个无效的 CSS 值（CSS 规范中并不存在该关键字），浏览器会直接忽略该声明，退回到默认行为（等效于 normal），而 normal 在 disabled textarea 中会折叠换行与多余空格。
✅ 正确解法是使用标准值 white-space: pre-wrap：
textarea,
textarea:disabled {
width: 600px;
height: 100px;
white-space: pre-wrap; /* ✅ 关键：保留换行 + 自动折行 */
overflow-wrap: break-word; /* 可选：增强长单词断行兼容性 */
resize: none;
}配合以下 HTML 和 JS 即可实现无缝切换：
<textarea>1asdfasdf 2afdasdfafdasdfafdasdfaw 3asdfasdf 4asdfasdf</textarea> <br/> <button>Toggle 'disabled'</button>
const textarea = document.querySelector("textarea");
document.querySelector("button").addEventListener("click", () => {
textarea.disabled = !textarea.disabled; // 推荐写法：比 setAttribute 更简洁可靠
});⚠️ 注意事项：
- 不要使用 wrap="on" 属性（HTML5 中已废弃，且对 disabled 行为无实质影响）；
- 避免仅对 :disabled 单独设置 white-space，而遗漏普通状态——应统一应用，保证视觉一致性；
- 若需兼容旧版 Safari（<15.4），可额外添加 -webkit-appearance: none 和 border: 1px solid #ccc 来稳定渲染；
- pre-wrap 同时满足两个核心需求：保留原始 \n 换行（用于结构化内容）+ 自动在容器边界处折行（避免水平溢出），是 disabled textarea 的黄金选择。
对比其他 white-space 值：
- pre：保留所有空格与换行，但不自动折行 → 容器过窄时出现横向滚动条；
- pre-line：合并空格但保留换行，适合纯文本摘要类场景，但会丢失用户有意输入的多个空格；
- pre-wrap：兼顾语义完整性与响应式排版，是本场景唯一推荐方案。
最终效果：无论启用或禁用，textarea 内容的行数、段落间距、scrollHeight 及视觉布局均完全一致，真正实现“状态切换零感知”。
