Search code examples
htmlwhitespace

Avoid line break between html elements

I have this <td> element:

<td><i class="flag-bfh-ES"></i>&nbsp;+34&nbsp;666&nbsp;66&nbsp;66&nbsp;66</td>

I was hoping to keep this into a single line, but this is what I get:

enter image description here

As you can see, flag and telephone number are in separate lines. The &nbsp; are working in between the numbers of the telephone number, but not between flag and telephone number.

How can I make sure that no line-break at all is introduced by the renderer?

Solution

  • There are several ways to prevent line breaks in content. Using &nbsp; is one way, and works fine between words, but using it between an empty element and some text does not have a well-defined effect. The same would apply to the more logical and more accessible approach where you use an image for an icon.

    The most robust alternative is to use nobr markup, which is nonstandard but universally supported and works even when CSS is disabled:

    <td><nobr><i class="flag-bfh-ES"></i> +34 666 66 66 66</nobr></td>

    (You can, but need not, use &nbsp; instead of spaces in this case.)

    Another way is the nowrap attribute (deprecated/obsolete, but still working fine, except for some rare quirks):

    <td nowrap><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

    Then there’s the CSS way, which works in CSS enabled browsers and needs a bit more code:

    <style>
.nobr { white-space: nowrap }
</style>
...
<td class=nobr><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>