display:flex导致span标签文本前后空格丢失的原因及解决办法

空格丢失的原因 #

这并非flex属性主动移除了空格，是两个HTML/CSS规则叠加导致的表现差异：

• 普通块级元素（未设置flex的p标签）内部的span属于行内元素，span标签之间的换行、缩进产生的空白文本节点，会被默认渲染为1个可见的空格，哪怕span内部的首尾空格被默认规则丢弃，也能靠节点之间的空格补全效果。
• flex容器的直接子元素会变成flex项，flex容器会自动忽略所有flex项之间的空白文本节点，不会渲染为间隙；同时HTML默认的white-space: normal规则会丢弃元素首尾的连续空格，你JS传入的" is "前后的空格会被直接删掉，最终三个flex项直接拼接在一起，就出现了空格丢失的表现。

解决方法 #

有三种常用方案可以实现空格正常展示：

1. 修改CSS保留空白符
   给flex容器内的文本元素设置white-space属性，强制保留首尾空格和连续空格：

.flex span {
  white-space: pre-wrap;
}

pre-wrap会保留空格同时允许自动换行，如果你不需要自动换行可以用white-space: pre。

2. 使用非换行空格实体
   如果不想修改CSS，可以把JS传入的空格替换为HTML的非换行空格 ，这种空格不会被默认合并规则丢弃：

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

3. 用margin控制flex项间距
   如果空格只是用来控制flex项之间的间距，直接给flex项设置margin更可控，也更符合flex布局的使用规范：

.flex span:not(:last-child) {
  margin-right: 0.25em;
}

内容的提问来源于stack exchange，提问作者Prodyut Das