HTML 字符 - 不可见的空间答案

【问题标题】：HTML Character - Invisible spaceHTML 字符 - 不可见的空间
【发布时间】：2014-01-12 16:32:25
【问题描述】：

我有一个名为 DaltonEmpire 的网站。

当用户复制“DaltonEmpire”时，我希望将“Dalton Empire”添加到他们的剪贴板中。

我只找到了一种解决方案；使用空格，但将letter-spacing 设为-18px。有没有更简洁的解决方案，比如为此使用 HTML 字符？

我的例子JSFiddle 和代码：

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>

【问题讨论】：

标签： html css hidden space

【解决方案1】：

这里有一些有趣的相关信息。它不能解决您的问题，但它可能会帮助那些正在寻找一种方法来创建可选换行符的人，就像我一样。零宽度空间 &#8203; 和 <wbr> 元素是两个可能的选项。

【讨论】：

【解决方案2】：

您可以为此使用word-spacing。但是，要制作更动态的属性，您需要使用 em 单位。这样单位是基于字体大小的，所以实际上支持所有字体系列和字体大小：

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

em 不是一个绝对单位——它是一个相对于当前选择的字体大小。

来源：Why em instead of px?

jsFiddle

【讨论】：

谢谢！这确实有效，is not dependant on the font size！ +1 em的解释，我不知道这个！
@Isaiah 很高兴我能帮上忙！ :)
@Isaiah - 请注意，此答案还取决于空格字符的宽度与字体大小的比率。例如，在 Windows 上，Courier New 需要大约 -0.5em。
奇怪的是，当我在一长串标签上尝试这个时，我偶尔会出现 1px 的错位，这是由于标签周围的边框而引起的。

【解决方案3】：

你可以给margin-left或Font-size CSS属性

DEMO

span.nospace {

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

【讨论】：

对不起，但对你来说就像我对@Av Avt 所说的一样。这将取决于字体大小，并不理想，无论如何谢谢！

【解决方案4】：

你看起来像这样吗：

HTML 空间：&nbsp; ?

【讨论】：

谢谢，但没有。我想要一个不可见的空间，仅在复制时可见。
啊抱歉，我误会了:)

【解决方案5】：

这个怎么样？对我来说看起来很整洁：

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

您现在可以删除 nospace 跨度。

【讨论】：

这行得通，只有（作为我的原始解决方案）这会depend on the font size，我必须手动调整它。不过还是谢谢！

【解决方案6】：

你也可以使用font-size: 0;demo

span.nospace {
        font-size: 0;
    }

【讨论】：

谢谢！这仍然需要一个丑陋的跨度，但这可以在任何地方工作，并且不依赖于实际的字体大小（逻辑上）。但是，有一种更好的解决方案。