vs white-space：nowrap

Question

我承认我习惯在单词之间使用 ，当我不希望它们中断时（例如表格标题）。

我应该用white-space:nowrap为我的元素设置样式吗？如果我唯一要做的就是保持文字不被包裹，那么是否有任何优点/缺点？

Answer 1

有些情况下，不间断的空间无法帮助：

• word包含连字符（例如 web-developer ）;
• hyphens: auto用于包含文本的元素以自动进行连字。

在这些情况下，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不间断空格非常反人类可读）。
4. 它可以用于没有空格但带有连字符的文本。 white-space:nowrap也胜过hyphens: auto，overflow-wrap: anywhere和word-break: break-word，尽管您不应该有矛盾的风格。
5. 无论是否自动换行都在样式范围之内，而不是文档结构，因此white-space:nowrap比 更合适，就像CSS胜过<b>一样。