立即学习“前端免费学习笔记（深入）”；

2、若需严格保留缩进与换行，使用 white-space: pre;，此时文本将按源码格式渲染，不折行。

3、示例CSS：textarea + .output { white-space: pre-wrap; font-family: monospace; }。

三、对用户输入内容进行 HTML 转义后替换空格

当从 或 获取用户输入时，可借助JavaScript将普通空格转换为  ，再注入到目标元素中，从而在渲染时保留空格数量。

1、获取用户输入值：const input = document.getElementById('myInput').value;

2、将每个空格替换为  ：const escaped = input.replace(/ /g, ' ');

3、将结果写入目标元素：document.getElementById('display').innerHTML = escaped;

四、使用

 标签包裹输入内容

 元素默认具有 white-space: pre; 行为，天然保留所有空格、制表符和换行符，适合展示原始格式文本。
1、将用户输入内容动态插入到 
 标签内，而非 
 或 
。
2、确保输入内容已做HTML转义（如将  替换为 zuojiankuohaophpcn），避免XSS风险。
3、若需样式自定义，可为 
 添加CSS：pre { margin: 0; padding: 0; font-size: 1em; }。

五、在 textarea 中启用空格可见性辅助（仅开发调试用）
textarea 本身不渲染空格视觉效果，但可通过CSS伪元素或JavaScript模拟空格符号（如·），便于确认空格是否被正确录入，该方式不影响实际值，仅用于界面反馈。
1、为 textarea 添加类名：class="show-spaces"。
2、使用CSS + JavaScript组合：监听输入事件，将空格替换为 · 并显示在只读预览区。
3、关键提示：此方法不改变实际 value 值，仅用于可视化验证。