显示 flex 省略了 span 标签中给出的文本值周围的空格 [重复]

Posted 2023-03-07

【中文标题】显示 flex 省略了 span 标签中给出的文本值周围的空格 [重复]

【英文标题】：Display flex is omitting spaces around the text value given in a span tag [duplicate]

【发布时间】：2021-08-10 17:07:50

【问题描述】：

我创建了一个演示，用 空格 传递值，在 html 文件中定义了两个元素（p 标签），一个有 flex 属性，另一个没有。具有 flex 属性的元素在 HTML 文件中显示不带空格的值，而另一个元素仅显示包含空格的实际值。

如何在具有 flex 属性的元素中显示来自 JS 文件的实际值？

更新： 我想了解为什么 flex 属性会从值中删除空格？

var value = " is ";
document.getElementById('value').innerHTML = value;
document.getElementById('value1').innerHTML = value;

.flex
  display: flex;

<p class="flex">
 <span>This</span>
 <span id='value'>value</span>
 <span>hello</span>
</p>

<p>
 <span>This</span>
 <span id='value1'>value</span>
 <span>hello</span>
</p>

【参考方案1】：

如需更深入的解答，请查看@Orial's 帖子。^{CSS flex box last space removed}

---

white-space processing model 告诉我们：

如果行尾的 空格 (U+0020) 将空格设置为 normal、nowrap 或 pre-line，它也会被删除 .

为防止这种情况，请使用white-space: pre-wrap;:

.flex 
  display: flex;
  white-space: pre-wrap;

演示：

var value = " is ";
document.getElementById('value').innerHTML = value;
document.getElementById('value1').innerHTML = value;

.flex
  display: flex;
  white-space: pre-wrap;

<p class="flex">
 <span>This</span>
 <span id='value'>value</span>
 <span>hello</span>
</p>

<p>
 <span>This</span>
 <span id='value1'>value</span>
 <span>hello</span>
</p>