HTML: No line break between particular words

Sometimes, we want that certain words stay together on an HTML page and there is no automatically wrap placed between these words. Conceivable, for example, are company names, or a name and an associated number that belong together and should not be separated.

For all of these cases, we can use the so-called non-breaking space. The nonbreaking space is the string   standing for the abbreviation Non-Breaking Space (space without a newline). This character, we can just insert directly into our HTML code, as the following example shows:

<p>The number 123&nbsp;456&nbsp;789 belongs together.</p>

The string   is displayed as a normal space. But if at this point should be a linebreak, the number 123 456 789 does not wrap, all digits remain side by side. Alternatively, the string   can also be used which has the same effect.

Write multiple spaces next to each other

HTML has the habit of putting more than one spaces together to only one space by default. That's a good thing, because if all spaces, tabs and line breaks from the HTML file would be visible, nearly all page designs were damaged and dealing with creating pages would be much more difficult.

But what can you do, if we still would like to see more spaces next to each other?

     
     

As the example shows, we can re-use our protected space. Both lines of HTML code show 5 spaces next to each other. Either we can use our five spaces without normal ones, or we combine normal spaces with non-breaking spaces.

Entire line without wrapping

If we do not want a whole line to wrap around, it is somewhat difficult to write a non-breaking space between each word. Luckily, we have the HTML tag <nobr> for this.

<nobr>This line will remain together in one long line.</nobr>

The line between <nobr> and </nobr> will not be wrapped and it will be displayed as a complete line in the browser.

CSS property

Interesting in this context is also the article about the CSS white-space property. With white-space you can achieve the same as with the non-breaking space and the HTML tag <nobr>. If you set white-space to the correct value, you can display the formatted HTML code with line breaks and spaces in the browser. But more on that, you can read in the article mentioned above.