2

Web サイトに口座番号を表示したい。読みやすくするために、数字をグループ化するためにいくつかの場所にスペースを入れたいと思います. 簡単。ただし、ユーザーがその番号を選択してコピーするときに、貼り付けるときにテキストにスペースが入らないようにしたいと思います。たとえば、文字数に制限があるオンライン銀行口座のフィールドを台無しにしないようにします。

これを良い方法で解決する方法についてのアイデアはありますか?

私は次の行に沿って何かを考えていますが、より良い方法があるかどうか疑問に思っています。

// 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/

それはブラウザの互換性要件に依存するかもしれませんが...

編集: ブラウザによってコピーの実装が異なることを指摘してくれた jasssonpet に感謝します... FF と chrome は、この方法で追加されたスペースをコピーしません。IEはそうです。これは、これがおそらく最善の解決策ではないことを意味しますが、それでも注目すべき興味深いものであるため、私はそれを取り除くつもりはありません. :)

于 2012-05-31T16:05:07.947 に答える