2

我想在网站上显示一个帐号。为了更容易阅读，我想在几个地方放置空格来对数字进行分组。简单的。但是，我希望这样当用户选择并复制该数字时，粘贴时文本中不会有任何空格。这样它就不会弄乱例如对字符数有限制的在线银行帐户字段。

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

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

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

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

2 回答 2

3

我就是这样做的。如果您不希望在复制数字时出现空格，那么您需要使用某种填充或边距来呈现空格的外观。

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>
于 2012-05-31T16:01:07.487 回答
2

另一种选择是使用 :after 伪标签。

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/

Though that might depend on your browser compatibility requirements...

Edit: Thanks to jasssonpet for pointing out to me that the implementation of copying differs by browsers... FF and chrome do not copy the spaces added this way. IE does. This means this is probably not the best solution but still an interesting one to note so I'm not getting rid of it. :)

于 2012-05-31T16:05:07.947 回答