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>

Hypogynous

Answer 1

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

Alumroot

Thanks! This indeed works and is not dependant on the font size! +1 for the explanation of em, I didn't know this! – Hypogynous

@Hypogynous - 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. – Bax

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. – Mart

Answer 2

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.

• https://en.wikipedia.org/wiki/Zero-width_space
• https://en.wikipedia.org/wiki/HTML_element#wbr
• http://graphemica.com/search?q=space

Wes

Should be chosen answer, never knew about <wbr> ! – Ophthalmologist

Fantastic! Exactly what I was looking for to solve an unnatural line break issue. – Stucker

Answer 3

Are you looking something like this:

HTML space:   ?

Timelag

Thank you but no. I want an invisible space, only visible when copying. – Hypogynous

Ah sorry, I missunderstood :) – Timelag

Answer 4

You can also use font-size: 0; demo

span.nospace {
        font-size: 0;
    }

Substratosphere

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. – Hypogynous

Answer 5

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.

Qnp

This works, only (as my original solution) this would depend on the font size, and I'd have to adjust it manually. But thanks anyway! – Hypogynous

Answer 6

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

DEMO

span.nospace {

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

Wool

Sorry, but same for you as I said to @Av Avt. This would depend on the font size, not ideal, Thanks anyway! – Hypogynous