15

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>

6 Answers 6

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

1
  • Should be chosen answer, never knew about <wbr> !
    – pxwise
    Jun 7, 2022 at 20:25
15

Are you looking something like this:

HTML space: &nbsp; ?

2
  • Thank you but no. I want an invisible space, only visible when copying.
    – Isaiah
    Dec 24, 2013 at 12:23
  • Ah sorry, I missunderstood :) Dec 24, 2013 at 12:25
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

3
  • Thanks! This indeed works and is not dependant on the font size! +1 for the explanation of em, I didn't know this!
    – Isaiah
    Dec 24, 2013 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, 2013 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 7, 2016 at 8:25
6

You can also use font-size: 0; demo

span.nospace {
        font-size: 0;
    }
1
  • 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, 2013 at 12:33
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.

1
  • 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!
    – Isaiah
    Dec 24, 2013 at 12:30
0

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

DEMO

span.nospace {

    margin-left: -4px; /* or font-size:0px */
}
1
  • 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, 2013 at 12:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.