CSS将br标签替换为逗号时文本后出现多余空格如何解决

关联代码 #

现有HTML结构 #

<div>
one first
<br class="hey">
two second
<br class="hey">
three third
</div>

初始CSS写法 #

.hey {
  content: '';
}
.hey:before {
  content: ', ';
}

效果差异 #

• 实际输出：one first , two second , three third，每个逗号前多出1个空格
• 预期输出：one first, two second, three third，逗号紧贴前序文本，逗号后保留1个空格分隔内容

限制条件 #

• 无法修改、注入任何原生HTML代码
• 支持纯CSS实现，也可通过引入外部JS实现

可行方案 #

纯CSS方案（优先推荐） #

多余空格的根源是HTML源码中
标签和前一段文本之间的换行生成了匿名空白文本节点，通过字号控制消除这类空白的占位即可，代码如下：

/* 父容器字号设为0，让源码换行产生的空白节点宽度为0 */
div {
  font-size: 0;
}
/* 恢复正常文本、br插入内容的显示字号 */
.hey,
div {
  font-size: 16px;
}
/* 清除br标签默认的换行效果 */
.hey {
  display: inline;
  content: '';
}
/* 插入逗号+空格作为分隔符 */
.hey::before {
  content: ', ';
}

以上代码不需要改动任何HTML结构，渲染结果完全匹配预期。

JS方案（备选） #

如果需要用JS实现，可在外部JS文件中遍历所有class为hey的br标签，直接将其替换为内容为, 的文本节点即可，效果一致，但性能不如纯CSS方案。

内容的提问来源于stack exchange，提问作者Elaine Byene