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

Question

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

下面是它应该是什么样子的图片,以及字体变化时的样子:

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

提前致谢!-亚当

PS:如果你需要查看我当前的代码,请告诉我; 不要认为这会有所帮助.

Answer 1

只需 在两个单词之间应用不间断的空格():

word1&nbsp;word2

这在法语标点符号和数字方面特别有用

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

div {
  white-space: nowrap;
}

<div>word 1 word2 word3</div>

如果你试图确保文本和svg在同一行上保持在一起,你必须使用这种方法,不间断的空间不起作用.

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

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