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

【问题标题】：Display flex is omitting spaces around the text value given in a span tag [duplicate]显示 flex 省略了 span 标签中给出的文本值周围的空格 [重复]
【发布时间】：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>

【问题讨论】：

标签： javascript css sass flexbox

【解决方案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>

【讨论】：