CODEWITHSUNDEEP
htmlcsshiddenspace
Isaiah
Isaiah

Reputation: 1892

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:

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>

Upvotes: 16

Views: 55659

Answers (6)

skibulk
skibulk

Reputation: 3188

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 &#8203; and <wbr> element are two possible options.

Upvotes: 22

nkmol
nkmol

Reputation: 8091

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

Upvotes: 7

Manoj
Manoj

Reputation: 1890

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

DEMO

span.nospace {

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

Upvotes: 0

user3096206
user3096206

Reputation: 592

Are you looking something like this:

HTML space: &nbsp; ?

Upvotes: 15

AVAVT
AVAVT

Reputation: 7133

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.

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

You can also use font-size: 0; demo

span.nospace {
        font-size: 0;
    }

Upvotes: 6

Related Questions