Html 如何确保两个单词保持在同一行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20410166/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to ensure two words stay on the same line?
提问by Adam Bowker
I am making a person website for myself. In my short bio, I have a few words (or groups of words) that are highlighted. In some of my testing, I have noticed that sometimes two words get split, so the highlighting effect looks like crap.
我正在为自己制作个人网站。在我的简短简历中，我突出显示了几个词（或词组）。在我的一些测试中，我注意到有时两个词会分开，所以突出显示效果看起来很糟糕。
Here's a picture of what it should look like, and what it looks like if the font changes, respectively:
这是它应该是什么样子的图片，以及如果字体改变的样子，分别是：
[Should Look Like] http://i.imgur.com/MZmyj5S.png
[应该看起来像] http://i.imgur.com/MZmyj5S.png
[Don't want this happening] http://i.imgur.com/yLoYIza.png
[不希望这种情况发生] http://i.imgur.com/yLoYIza.png
Notice how "web developer" get's pushed apart to two lines. Is there any way I can ensure they stay together?
请注意“Web 开发人员”是如何被分成两行的。有什么办法可以确保他们在一起吗？
Thanks in advance! -Adam
提前致谢！-亚当
PS: If you need to see my current code, let me know; don't think that will help much though.
PS：如果您需要查看我当前的代码，请告诉我；不过，不要认为这会有多大帮助。
回答by Huangism
Just apply a non-breaking space ( ) between the two words:
只需 在两个单词之间添加一个不间断空格 ( )：
word1 word2
This is especially useful when it comes to french punctuation and numbers
这在处理法语标点符号和数字时特别有用
If you need this on a larger scale then you can use CSS:
如果你需要更大规模的，那么你可以使用 CSS：
div {
white-space: nowrap;
}<div>word 1 word2 word3</div>You would have to use this method if you are trying to make sure text and a svgstay together on the same line, non-breaking space does not work for that.
如果您试图确保文本和svg保持在同一行上，则必须使用此方法，不间断空格对此不起作用。
You can create a nowrap class so you can apply it anywhere:
您可以创建一个 nowrap 类，以便您可以在任何地方应用它：
<span class="nowrap">No one can wrap us</span>
回答by Geomatic
The CSS way:
CSS方式：
a { white-space: nowrap; }
