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/

Answer 2

我不确定你是否可以使用css.Anyway你可以使用javascript来做到这一点。代码如下：

 String.prototype.chunk = function(n) {
   var space = [];
   for(var i=0, len=this.length; i < len; i += n) {
     space.push(this.substr(i, n))
   }
   return space
 };

"0102030405".chunk(2).join('  ');

检查Fiddle

Answer 3

它无法在CSS中完成，因为没有选择器可以引用元素内容中的第3个字符或前两个字符。 CSS对元素和伪元素进行操作，当前没有定义的伪元素适用于此。

如果可能，应该在服务器端修改内容，或者如果不可能，使用客户端JavaScript修改内容，以便字符对显示为元素或者它们之间有空格字符，例如： <span class="number">01 02 03 04 05</span>。在后一种情况下，您可以使用word-spacing（可能带有负值）来调整间距。

如何用CSS只用两个字母间隔字母？

3 个答案: