html中普通空格被压缩是规范行为； 可强制显示不可折叠空格；white-space:pre-wrap最常用以保留空格和换行；动态内容推荐用textcontent配合css而非innerhtml替换。
为什么普通空格在HTML里不显示
HTML解析器会把连续的空白字符（空格、制表符、换行）全部压缩成单个空格，这是规范行为，不是bug。所以写 <p>hello world</p> 依然只显示一个空格间隔。
用 替代空格最直接
非断行空格 是HTML实体，浏览器不会合并它，适合少量固定空格需求：
<p>Name: John</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>
- 每个
- 不能用在
<pre class="brush:php;toolbar:false;"></pre>外的纯文本节点中自动生效，必须显式写出来 - 不适合动态内容——比如从JS变量拼接时得手动替换空格为
CSS的 white-space 更灵活但有副作用
对容器设置 white-space: pre 或 pre-wrap 可保留原始空格和换行：
<p style="white-space: pre-wrap">hello world</p>
-
pre：完全保留空格和换行，但不自动换行（文字超宽会溢出） -
pre-wrap：保留空格+换行，且允许折行，日常最常用 - 注意：它同时保留所有换行符，如果源数据含多余回车，会多出空行
- 内联样式易遗漏，建议用 class 统一控制，避免散落在模板各处
JS中处理动态空格要防转义陷阱
若空格来自用户输入或API响应，直接 innerHTML 插入会丢失空格；需结合CSS或实体转换：
- 方案一（推荐）：给容器加
white-space: pre-wrap，再用textContent赋值，安全又省事 - 方案二：用正则把空格全替换成
<div class="foo"> 中的空格 <li>别用 <code>innerHTML = str.replace(/ /g, ' ')直接拼接，容易XSS，尤其当str含用户输入时
真正麻烦的是混合场景：既要保留缩进又要支持富文本编辑，这时候得拆解空格语义——是排版需要？还是数据分隔？不同意图得用不同解法。
