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

Question

我正在为自己创建一个人网站。在我的简短生物中，我有一些突出显示的单词（或单词组）。在我的一些测试中，我注意到有时两个单词会被分开，因此高亮效果看起来就像垃圾。

下面是一张它应该是什么样子的图片，以及字体变化后的样子：

[看起来像] http://i.imgur.com/MZmyj5S.png

[不希望发生这种情况] http://i.imgur.com/yLoYIza.png

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

提前致谢！ - 亚当

PS：如果您需要查看我当前的代码，请告诉我;不要以为这会有所帮助。

Answer 1

只需在两个单词之间应用不间断的空格（ ）：

word1 word2

这在法语标点符号和数字

时特别有用

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

div {
  white-space: nowrap;
}

<div>word 1 word2 word3</div>

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

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

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

Answer 2

CSS方式：

a { white-space: nowrap; }