html - 如何仅使用 CSS 每两个字母做字母间距？

Question

这是我的 html 代码:

<span class="number">0102030405</span>

我想得到这个:

01 02 03 04 05

这是我尝试过的:

.number {
    letter-spacing: 2px;
    text-weight: bold;
}

但每个数字之间都有间距。如何应用每两个数字的间距？

注意:
我正在寻找一个纯 CSS 解决方案。

Answer 1

对于纯 CSS 解决方案，如果没有 nth-letter 选择器，您将需要处理变通方法。当前没有 nth-letter(虽然是 CSSWG is discussing it)，您肯定知道，所以这里有一个可能的解决方法，尽管是一个丑陋的方法。

如果您愿意为 .number 的每个实例进行调整，那么您可以使用以下基于使用列拆分数字对的方法。对于给定的示例效果很好:

.number {
    width: 8em;
    display: block;
    word-wrap: break-word;
    columns: 5;
    column-gap: 0.2em;
}

参见:http://jsfiddle.net/WgRs6/

width、columns 和 column-gap 值需要根据标记中的数字以及所选的进行调整字体大小。您还需要调整它们以更改列之间的空间。不幸的是，如果数字的位数不同(例如 1、200、3、9000、42、100000)，这肯定会中断。您要求拆分两个数字，希望这对您来说不是问题。

理想情况下，您可以使用 lettering.js ，或任何将您的字母拆分为不同的 span 元素的 JavaScript，然后您可以将这些元素与 .number span:nth-child(2n) 组合以添加所需的间距。请参阅:http://jsfiddle.net/SSq7M/