javascript - 显示 flex 省略了 span 标签中给出的文本值周围的空格

Question

我创建了一个演示，传递带有空格的值，在 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>

标签： javascriptcsssassflexbox

Answer 1

如需更深入的答案，请查看@Orial 的帖子。
^{CSS flex box 最后一个空格被移除}

---

空白处理模型告诉我们：

如果行尾的空格(U+0020) 将 white-space 设置为 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>