Isaiah Isaiah - 6 months ago 22
CSS Question

HTML Character - Invisible space

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:

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

<style>
span.nospace {
letter-spacing: -18px;
}
</style>

Answer

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

Comments