如何确保两个字保持在同一行？ [英] How to ensure two words stay on the same line?

问题描述

我为自己制作个人网站。在我的简短的生物，我有几个词（或组词），突出显示。在我的一些测试中，我注意到有时两个单词分裂，所以突出的效果看起来像垃圾。

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:

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

[Should Look Like] http://i.imgur.com/MZmyj5S.png

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

[Don't want this happening] http://i.imgur.com/yLoYIza.png

请注意web开发人员的方式推开两行。有什么方法可以确保他们一起住吗？

Notice how "web developer" get's pushed apart to two lines. Is there any way I can ensure they stay together?

提前感谢！ -Adam

Thanks in advance! -Adam

PS：如果你需要查看我当前的代码，让我知道;

PS: If you need to see my current code, let me know; don't think that will help much though.

推荐答案

只要应用不间断的空格（& ; c>）

Just apply a non-breaking space ( ) between the two words:

word1 word2

这对于法语标点符号和数字特别有用。

This is especially useful when it comes to french punctuation and numbers

如果你需要这个更大的规模，你可以使用CSS：

If you need this on a larger scale then you can use CSS:

div {
  white-space: nowrap;
}

<div>word 1 word2 word3</div>

使用这个方法，如果你试图确保文本和svg在一起在同一行，不间断的空间不工作。

You would have to use this method if you are trying to make sure text and a svg stay together on the same line, non-breaking space does not work for that.

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

You can create a nowrap class so you can apply it anywhere:

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

这篇关于如何确保两个字保持在同一行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！