How to ensure two words stay on the same line?

user_3071939 0
Viewed 39643

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

[Don't want this happening] 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?

Thanks in advance! -Adam

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

highlight css html
2 Answers

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:

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 svg stay together on the same line, non-breaking space does not work for that.

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

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

The CSS way: 

a { white-space: nowrap; }
user_29095010
Related