html - 如何保证两个词在同一行？

Question

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

下面是它应该是什么样子的图片，以及字体改变后的样子:

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

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>