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

Posted 2023-03-06

【中文标题】如何确保两个单词保持在同一行？

【英文标题】：How to ensure two words stay on the same line?

【发布时间】：2013-12-22 23:50:54

【问题描述】：

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

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

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

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

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

提前致谢！ -亚当

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

【问题讨论】：

web developer

white-space:nowrap;

@MarcB 谢谢！那行得通。

复制：***.com/questions/18753828/…

【参考方案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>

【参考方案2】：

CSS方式：

a  white-space: nowrap;