&nbsp；vs空白:nowrap

Question

我承认，我有一个习惯，当我不想让单词中断时(例如表格标题)，我会在单词之间使用 。

我真的应该用white-space:nowrap设置元素的样式吗？如果我唯一想做的就是防止单词被包装，那么这两者有什么优点/缺点吗？

Answer 1

在某些情况下，不间断空格无能为力：

容器元素包含连字符(例如，web-developer);

• hyphens: auto用于容器元素以进行连字automatically.

在这些情况下，white-space: nowrap很有用。此外，无论是否将样式应用于文档，不间断空格都有效，而CSS规则仅在启用样式时有效。

Answer 2

white-space:nowrap有几个优点

1. 它可以全局应用于所有匹配的文本元素。如果你把它放在一个类中，或者将它应用于所有的跨度，那么你不需要在所有的文件中添加/删除 。
2. 与拥有一堆html实体相比，它使html更容易阅读。它还允许将源代码换到下一行，而不会弄乱任何东西(行尾的 表示为2个空格)。
3. 它可以应用于很难/不可能用 替换空格的元素。例如，在react中，<span style={{whiteSpace: 'nowrap'}}>{myValue}</span>可以正常工作，而不需要编辑值。这对于react特别有用，因为它将转义任何html实体(并且使用unicode非中断空格是非常反人类的readable).
4. It可以用于没有空格但有连字符的文本。white-space:nowrap还胜过hyphens: auto、overflow-wrap: anywhere和word-break: break-word，尽管您不应该与style.
5. Whether相矛盾，因为换行是在样式而不是文档结构的范围内，因此在CSS优于<b>.

的情况下，white-space:nowrap比 更合适