如何使用 CSS/Sass 在字符串中的“，”之后添加空格答案

【问题标题】：How to add space after "," in a string using CSS/Sass如何使用 CSS/Sass 在字符串中的“，”之后添加空格
【发布时间】：2021-12-28 14:26:12
【问题描述】：

我有一个表格单元格，里面有一个字符串。我需要在逗号后仅使用 CSS/scss 提供一个空格。它应该看起来像这样。

目前如下图所示

这 3,500 GE 文本在 span 标签中，我还需要更改 span 标签内的文本位置，如第一个标签所示。

我只能使用 JS 找到解决方案，但我只想通过 CSS/SCSS。

.amountCount {
  text-align: center;
  position: relative;
}

&lt;span class="amountCount"&gt;3,500 GE&lt;/span&gt;

【问题讨论】：

你需要 JS....
这不能在纯 CSS 中完成。您要么需要修改 DOM，使用 javascript（修改 DOM），要么使用具有较大字符宽度的字体作为逗号。
如这里所说的stackoverflow.com/questions/8677805/… 存在根据css类格式化数字的规范，但直到今天没有消息
您可以使用自定义字体，其中“，”的符号在其右侧包含空格。字体可以在 CSS 中应用：用@font-face { font-family: 'bigComma'; src: url('fonts/bigComma.ttf'); } 定义它并用.amountCount { font-family:'bigComma'; } 应用它}

【解决方案1】：

有一个（诚然不完美的）纯 HTML 解决方案，即使用 全角逗号：

&#65292;

工作示例：

table,
td {
  border: 1px solid rgb(0, 0, 0);
}

td {
  padding: 6px 12px;
}

<table>
  <tr>
    <td><span class="amountCount">3,500 GE</span></td>
    <td><span class="amountCount">3&#65292;500 GE</span></td>
  </tr>
</table>

NB 我知道这是不完美的，因为您希望空格仅显示在逗号字符的右侧，而不是两边。

【讨论】：

这里我们添加了 2-3 个空格，但我只希望在 "," 和 5 之间添加一个空格
事实上，我们没有添加 any 空格 - 只是使用了不同的逗号。但我承认这不是你真正想要的。我想发布纯 HTML 解决方案来展示一种不同的方法，包括部署 Unicode 扩展字符，而不是 CSS。

【解决方案2】：

首先，CSS 不适合该操作，因为 CSS 负责样式设置，而不是修改 DOM 中存在的实际内容。

在任何情况下，如果您真的需要使用 CSS，并且可以将 HTML 内容一分为二，您可以使用 CSS 插入具有自定义内容的新元素，从而达到您的目标。

.amountCount span:not(:last-child):after{
  content: ", ";
}

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

【讨论】：