HTML Character - Invisible space

Question

I have a website called DaltonEmpire.

When a user copies "DaltonEmpire" I would like "Dalton Empire" to be added to their clipboard.

I only came to one solution; use a space, but make the letter-spacing -18px. Isn't there a neater solution, such as a HTML character for this?

My example JSFiddle and code:

span.nospace {
  letter-spacing: -18px;
}

<ol>
  <li>Dalton<b>Empire</b></li>
  <li>Dalton&zwnj;<b>Empire</b></li>
  <li>Dalton&zwj;<b>Empire</b></li>
  <li>Dalton&#8203;<b>Empire</b></li>
  <li>Dalton<span class="nospace"> </span><b>Empire</b> <i>The only one that works</i>
  </li>
</ol>

score 16 · Answer 1 · answered Jun 02 '16 at 14:23

16

Here is some interesting and related info. It doesn't solve your problem, but it may help people who are searching for a way to create an optional line-break, like I was. The Zero-Width Space  and <wbr> element are two possible options.

answered Jun 02 '16 at 14:23

skibulk

3,088
1
34
42

Should be chosen answer, never knew about ! – pxwise Jun 07 '22 at 20:25

score 15 · Answer 2 · answered Dec 24 '13 at 12:21

15

Are you looking something like this:

HTML space:   ?

answered Dec 24 '13 at 12:21

user3096206

592
3
6
12

Thank you but no. I want an invisible space, only visible when copying. – Isaiah Dec 24 '13 at 12:23
Ah sorry, I missunderstood :) – user3096206 Dec 24 '13 at 12:25

score 7 · Accepted Answer · edited Jun 20 '20 at 09:12

7

You can use word-spacing for this. However to make a more dynamic property you want to use the em unit. This way the unit is based on the font-size, so actually supports all the font families and font sizes:

ol li
{
    word-spacing: -.2em;
}

em is not an absolute unit - it is a unit that is relative to the currently chosen font size.

source: Why em instead of px?

jsFiddle

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 24 '13 at 12:32

nkmol

8,025
3
30
51

Thanks! This indeed works and [is not dependant on the font size](http://jsfiddle.net/4BbLU/4/)! +1 for the explanation of `em`, I didn't know this! – Isaiah Dec 24 '13 at 12:36
3

@Isaiah - Note that this answer is also dependent on the ratio of the width of the space character to the font-size. For example, you would need about `-0.5em` for `Courier New` on Windows. – Alohci Dec 24 '13 at 13:01
curiously, when i tried this on a long list of labels, i got the occasional 1px misalignment, noticable because of the border around the label. – eMBee Nov 07 '16 at 08:25

score 6 · Answer 4 · answered Dec 24 '13 at 12:16

6

You can also use font-size: 0; demo

span.nospace {
        font-size: 0;
    }

answered Dec 24 '13 at 12:16

Bhojendra Rauniyar

83,432
35
168
231

Thanks! This still requires an ugly span, but this'd work everywhere and isn't dependant on the actual font-size (logically). However, there's one better solution. – Isaiah Dec 24 '13 at 12:33

score 1 · Answer 5 · answered Dec 24 '13 at 12:17

1

How about this? Looks neat enough to me:

ol li{
    word-spacing: -4px; /* just enter an appropriate amount here */
}

You can now remove the nospace span.

answered Dec 24 '13 at 12:17

AVAVT

7,058
2
21
44

This works, only (as my original solution) this would [depend on the font size](http://jsfiddle.net/4BbLU/2/), and I'd have to adjust it manually. But thanks anyway! – Isaiah Dec 24 '13 at 12:30

score 0 · Answer 6 · answered Dec 24 '13 at 12:23

0

you can give margin-left or Font-size CSS property

DEMO

span.nospace {

    margin-left: -4px; /* or font-size:0px */
}

answered Dec 24 '13 at 12:23

Manoj

1,860
1
13
25

Sorry, but same for you as I said to @Av Avt. This would depend on the font size, not ideal, Thanks anyway! – Isaiah Dec 24 '13 at 12:32

HTML Character - Invisible space

6 Answers6

jsFiddle