How to ensure two words stay on the same line?

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>

Leave a Comment