如何在HTML中创建小空间？

Question

有 em dash 和 en dash。是否有与   相对应的 "en" 版本？是否有纯 ASCII 32 的 en 版本？

我希望有更好的编写方式：

123<span class="spanen">&nbsp;</span>456<span class="spanen">&nbsp;</span>789

或者是这样：

123<span class="spanen"> </span>456<span class="spanen"> </span>789

- user89021

---

请将文本从英语翻译成中文。仅返回翻译后的文本： 表示en-space， 表示em-space， 表示标点符号空格。有关更多信息，请参见https://dev59.com/Qmoy5IYBdhLWcg3wfeIR。顺便问一下，您所说的“en相当于纯Ascii 32”是什么意思？ - Pacerier

Answer 1

 （窄空格）应该足够了。

请注意， 与—（—）的宽度不同；为了分隔数字，您应该使用窄的不间断空格（U+202F）。

正如其他人所提到的，最好使用CSS属性word-spacing来定义空格的宽度。最好将其与white-space:nowrap;结合使用，以避免在数字组之间断行，并使整个数字保持在一行上。

- knittl

---

这正是我一开始寻找的东西。但我接受了 CSS 的答案，因为它甚至更好，并且回答了我所写的问题。 - user89021

正如我在答案中所说：使用word-spacing和white-space属性。 - knittl

如果您使用_white-space_属性，请记住该值为“_nowrap_”，而不是建议的“_no-break_”。 - Daniel Abril

你还有更窄的   和许多其他选择：https://dev59.com/Qmoy5IYBdhLWcg3wfeIR#8515417 - dolphin

Answer 2

不要使用毫无意义的技巧。如果你想要将一些单词分开，建议你使用CSS属性word-spacing：

.strangeNumbers {
  word-spacing: 0.5em;
}

<span class="strangeNumbers">123 456</span>

- ANeves

---

当然，你必须使用 white-space: nowrap; 来确保这个数字不会被分成两行。 - Maciej

不错，但最好使用   代替空格。 - Aleksei Zabrodskii

@elmigranto 为什么？我现在认为必须有一个Unicode非间断空格字符来分隔数字，就像OP想要的那样，并且这将是最好的选择。但如果不使用该特定字符，则我更喜欢使用CSS的word-spacing和white-space:nowrap;，而不是错误的字符。 - ANeves

..并使用负字间距来创建比正常更小的空格。 - commonpike

好的现代字体中内置了间距特性，而不是“黑客”技巧。在此处查看一个更好的答案，并提供许多不同种类空格的示例：https://dev59.com/Qmoy5IYBdhLWcg3wfeIR#8515417 - alttag

Answer 3

Unicode字符U+2002 EN SPACE ( ， 或作为实体引用 )是带有en宽度的空格。

- Gumbo

---

同样的情况也发生在我这里：这正是我一开始寻找的。但我接受了 CSS 的答案，因为它甚至更好，并且回答了我如何编写的问题。 - user89021

然而，这并不是一个小空间。 - Michael Piefel

Answer 4

 

在一些固定的字体中，省略号（...）和其他一些非标准空格字符没有得到很好的实现。

这将会导致在 web 浏览器端无法控制地破坏渲染效果，即使你指定了字体名称或字体族，也不能控制 web 浏览器实际使用的字体是否与你使用的相同。

但是，你可以构建一个任意大小的 100% 兼容空格，并且非常容易。em 值是当前字体大小。它是高度，但无论字体的宽度如何，它始终是相对于固定宽度字体中的高度的一个恒定值。因此，你可以利用它来解决这个问题。

以下是在固定宽度字体上创建一个1/2 宽度、不换行的空格的方法，它适用于所有情况。我在 span 的 style="" 选项中展示了它的实现方法，当然，你也可以创建一个 CSS 类来使其使用更为便捷：

<span style="font-size: .5em;">&nbsp;</span>

这里是如何创建一个 1/4宽度的不换行空格：

<span style="font-size: .25em;">&nbsp;</span>

这种方法只适用于空格大小小于当前全宽空格的情况，因为该字符比行上的其他字符短，所以它们控制行间距而不是较短的字符。

如果您需要一个比单个空格更宽的空格，请使用全角空格和半角空格的组合。虽然使用类似于1.5em的东西会得到更宽的空格，但您也会得到更高的空格，从而影响行间距。

尽管这种解决方案非常繁琐，但它具有始终有效的优点，而其他解决方案则没有。

- fyngyrz

Answer 5

您可以这样修改您的CSS：

.spanen{word-spacing:.6em;}

- austin cheney

---

奥斯汀，谢谢。这与被接受的答案基本相同。另一个回答比较早，那我能做什么呢？ - user89021

+1：抱歉，但我的回答不是早先的。当我发布我的答案时，我看到了奥斯汀的答案，唯一的原因是我觉得我的答案更完整，所以我没有删除它。 - ANeves