Preventing Line Breaks

For proper arrangement and appearance of text, it may be necessary to prevent the browser from inserting a line break at certain places.

There are three ways to inform the browser not to insert a line break.

Substituting   for space —

The   code can be used instead of a regular keyboard space between words.

Generally, a browser assumes it is okay to insert a line break where a keyboard space character is used. Substituting   for the space character tells the browser not to insert a line break.

Example:

yellow-tailed warbler

Using <nobr> and </nobr> tags —

The <nobr> and </nobr> pair of HTML markup tags can be used to prevent line breaks.

When text or other content is between <nobr> and </nobr>, the browser is told not to insert extra line breaks.

Example:

<nobr>yellow-tailed warbler</nobr>

Using white-space:nowrap CSS —

The white-space:nowrap CSS declaration can be used to prevent line breaks.

The CSS can be used inline or as a class. When text or other content is affected by white-space:nowrap CSS, the browser is told not to insert extra line breaks.

Example with inline CSS:

<span style="white-space:nowrap;">yellow-tailed warbler</span>

Example with a CSS class:

<style type="text/css">
.nowrap { white-space:nowrap; }
</style>
<span class="nowrap">yellow-tailed warbler</span>

Choosing which of the above three methods to use depends on situation and personal preference.

Using   generally is the quickest, for me, when two words need to be kept on the same line. Another quick one is <nobr> and </nobr> tags, especially when more than two words need to be kept together or an image with a word.

The white-space:nowrap CSS is declared in most of my web page headers. Typing class="nowrap" is both fast and common for me because the CSS rule is already declared.

(This content first appeared in Possibilities newsletter.)

Will Bontrager