CODEWITHSUNDEEP
htmlcss
Svish
Svish

Reputation: 158001

Display text with spaces that are not copied

I want to display an account number on a website. To make it easier to read I'd like to put spaces in a couple of places to group the numbers. Easy. However, I'd like it so that when a user selects and copies that number, there won't be any spaces in the text when he pastes. So that it won't mess up online bank account fields that have a limit on number of characters for example.

Any ideas on how to solve this in a good way?

I'm thinking something along the following lines, but wondering if there are better ways.

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

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

Upvotes: 3

Views: 650

Answers (2)

Chris
Chris

Reputation: 27599

Another option would be using :after pseudo tag.

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. :)

Upvotes: 3

Ryan Lynch
Ryan Lynch

Reputation: 7776

Thats how I would do it. If you don't want the spaces to show up when you copy the number, then you need to use some sort of padding or margin to give the appearance of a space.

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>

Upvotes: 5

Related Questions