HTML中输入真正空格需用 （不间断空格）或CSS的white-space: pre-wrap属性，前者适合单个空格控制，后者能完整保留空格、换行和制表符并允许折行。
HTML里怎么输入真正的空格字符
普通键盘敲出的空格在HTML中会被浏览器自动合并成一个，这是HTML规范行为，不是bug。想保留多个空格或控制空白符显示，得用特殊字符或CSS。
-
-
- 避免用全角空格（中文输入法下空格键），它属于Unicode字符，在某些字体或编码下可能显示异常或被截断
数据渲染后空格丢失的常见原因
后端传来的字符串里明明有多个空格，前端一插进 innerHTML 或 Vue/React 的插值里就只剩一个——大概率是模板引擎或DOM解析阶段把连续空白符压缩了。
- Vue 模板中直接写
{{ text }}会经过HTML解析，\t、\n、连续 - React 的
{text}同样走DOM文本节点创建流程，原生不保留空白符语义 - 服务端返回的JSON字段若含
" hello world "，JS读取后字符串本身没问题，问题出在插入DOM时的渲染逻辑
用 white-space CSS 属性强制保留空白
这是最干净的补救方式：让容器尊重原始字符串里的空格、换行、制表符。
div.preformatted {
white-space: pre-wrap; /* 保留空格和换行，且内容可换行 */
}-
pre：完全按原文本渲染，不换行（容易溢出） -
pre-wrap：推荐，保留空格和换行，同时允许自动折行 -
pre-line：合并空格但保留换行，适合日志类文本 - 注意：该样式只对块级元素生效，
<span></span>需加display: inline-block或改用<div> <h3>服务端或JS层做预处理（慎用）</h3> <p>如果必须用纯文本插入且无法加CSS，才考虑把空格替换成 <code>。但要注意边界情况：立即学习“前端免费学习笔记（深入）”；
- 别全局替换所有空格：
str.replace(/ /g, ' ')会破坏英文单词间正常空隙，导致无法选中、复制、SEO不友好 - 更安全的做法是仅替换“连续2个及以上空格”：
text.replace(/ {2,}/g, match => ' '.repeat(match.length)) - 若数据含
\t或\n，需一并处理：\t →，\n → <br>，但这样已接近富文本逻辑，建议优先走CSS方案
实际中最容易被忽略的是：很多人给容器加了
white-space: pre-wrap，却忘了父级元素有overflow: hidden或固定width导致长空格段被裁掉，调试时得看computed styles里最终生效的white-space值。 - 别全局替换所有空格：
