如何使用CSS/Sass为字符串中的逗号后添加单个空格

解决方法 #

方案1：使用CSS text-replace（推荐，现代浏览器兼容） #

这个属性可以直接在渲染阶段替换文本内容，无需修改HTML或引入JS代码：

.amountCount {
  text-align: center;
  position: relative;
  /* 把所有逗号替换为逗号+单个空格 */
  text-replace: "," ", ";
  /* 如需调整表格单元格内的文本垂直对齐效果，可补充以下属性 */
  vertical-align: middle;
  line-height: 1.2;
}

该方案兼容 Chrome 115+、Firefox 117+、Safari 17.4+，覆盖绝大多数主流用户场景。

方案2：全版本浏览器兼容实现 #

如果需要适配更低版本浏览器，仅需微调HTML结构，把逗号单独包裹后用CSS控制间距即可：

<span class="amountCount">3<span class="comma">,</span>500 GE</span>

对应CSS代码：

.amountCount {
  text-align: center;
  position: relative;
  vertical-align: middle;
}
.comma {
  margin-right: 0.25em; /* 可根据视觉需要调整空格宽度 */
}

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