Question

我想在网站上显示一个帐号。为了便于阅读，我想在几个地方放置空格来分组数字。简单。但是，我喜欢它，以便当用户选择并复制该号码时，粘贴时文本中不会有任何空格。因此，例如，它不会搞乱对字符数量有限制的在线银行帐户字段。

关于如何以一种好的方式解决这个问题的任何想法？

我正在思考以下几点，但想知道是否有更好的方法。

// CSS
span.acc_no span {display:inline-block; margin: 0 .5em}

// HTML
<span class="acc_no">12345<span>12</span>1234</span>

Answer 1

多数民众赞成我会怎么做。如果您不希望在复制数字时显示空格，则需要使用某种填充或边距来显示空格。

CSS：

.acc_no span {
    display:inline-block;
    padding-left:0.5em;
}
.acc_no span:first-child {
    padding-left:0;
}

HTML

<span class="acc_no"><span>12345</span><span>12</span><span>1234</span></span>

Answer 2

另一种选择是使用：伪标签后。

Here is your Account number: <span class="AccountNumber"><span>12345</span><span>12</span><span>1234</span></span>

.AccountNumber span:before
{
    content: " ";
}

http://jsfiddle.net/chrisvenus/DUsUN/

虽然这可能取决于您的浏览器兼容性要求......

编辑：感谢jasssonpet向我指出复制的实现因浏览器而异... FF和chrome不会复制以这种方式添加的空格。 IE确实如此。这意味着这可能不是最好的解决方案，但仍然是一个有趣的注意事项，所以我没有摆脱它。：）

显示包含未复制空格的文本

2 个答案: