与空白：nowrap答案

【问题标题】：  vs white-space:nowrap与空白：nowrap
【发布时间】：2023-03-21 20:15:01
【问题描述】：

我承认，当我不希望它们中断时（例如表头），我有在单词之间使用 &nbsp; 的习惯。

我真的应该用white-space:nowrap 为我的元素设置样式吗？如果我唯一要做的就是不让文字包装，那么这两种方法有什么优点/缺点吗？

【问题讨论】：

但是，与 HTML 中的所有元素一样，这不是“适合工作的正确工具”吗？
虽然我暂时想不出一个例子，但似乎在很多情况下都可以应用单一的最佳实践解决方案。
如果你想不出一个例子，那么你问的是一个理论问题，而不是一个关于你所面临问题的问题。根据常见问题解答，这不适合 SO。
@BenjaminGruenbaum：我想不出一个例子是对另一条评论的回应。评论部分与问题完全分开，那么我的评论究竟如何影响我的问题内容？另外，我的问题没有任何“理论性”。它寻求一个有效的解决方案来解决问题，即决定在当今多样化的浏览器世界中选择哪个是最灵活的非包装选项。
我担心的一个问题是，带有s 的标记是否会有任何语义或可访问性问题（例如，使用屏幕阅读器）。如果默认情况下 纯粹是展示性的，我认为是这种情况，那么使用它真的不应该有任何问题。我曾经在这里和那里添加&nbsp;s 以避免在不需要的地方换行，但现在我可能会切换到s。

【解决方案1】：

在某些情况下，不间断空格无济于事：

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

【讨论】：

【解决方案2】：

white-space:nowrap 有几个优点

它可以全局应用于所有匹配的文本元素。如果您将它放在一个类中或将其应用于所有跨度，那么您不需要在所有文件中添加/删除&nbsp;。
与拥有一堆 html 实体相比，它使 html 更易于阅读。它还允许将您的源代码包装到下一行，而不会弄乱任何东西（行尾的 &nbsp; 呈现为 2 个空格）。
它可以应用于难以/不可能用&nbsp; 替换空格的元素。例如，在 react {myValue} 中，无需编辑值即可正常工作。这对于 react 尤其有用，因为它会转义任何 html 实体（并且使用 unicode 不间断空格非常不适合人类阅读）。
它可用于没有空格但有连字符的文本。 white-space:nowrap 也胜过 hyphens: auto、overflow-wrap: anywhere 和 word-break: break-word，尽管你不应该有自相矛盾的风格。
是否自动换行属于样式而非文档结构的范围，因此 white-space:nowrap 比 &nbsp; 更合适，就像 CSS 优于  一样。

【讨论】：