如何确保两个单词保持在同一行？答案

【问题标题】：How to ensure two words stay on the same line?如何确保两个单词保持在同一行？
【发布时间】：2013-12-22 23:50:54
【问题描述】：

我正在为自己制作个人网站。在我的简短简历中，我有几个突出显示的词（或词组）。在我的一些测试中，我注意到有时两个单词会被拆分，所以突出显示效果看起来很糟糕。

这是一张应该是什么样子的图片，如果字体发生变化，它会是什么样子：

请注意“网络开发人员”是如何被分成两行的。有什么办法可以确保他们在一起吗？

提前致谢！ -亚当

PS：如果您需要查看我当前的代码，请告诉我；但不要认为这会有多大帮助。

【问题讨论】：

【解决方案1】：

只需在两个单词之间应用一个不间断空格 (&nbsp;)：

word1&nbsp;word2

这在涉及法语标点符号和数字时特别有用

如果您需要更大的规模，那么您可以使用 CSS：

div {
  white-space: nowrap;
}

&lt;div&gt;word 1 word2 word3&lt;/div&gt;

如果您试图确保文本和 svg 保持在同一行，则必须使用此方法，不间断空格不适用。

您可以创建一个 nowrap 类，以便在任何地方应用它：

<span class="nowrap">No one can wrap us</span>

【讨论】：

【解决方案2】：

CSS方式：

a { white-space: nowrap; }

【讨论】：