Avoid line break between html elements

Question

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   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?

Voting to reopen, since this is about elements, not text as https://stackoverflow.com/questions/572298/how-to-stop-text-from-taking-up-more-than-1-line — Ciro Santilli OurBigBook.com, Nov 17 '21 at 10:52

score 207 · Accepted Answer · answered Oct 06 '13 at 18:28

207

There are several ways to prevent line breaks in content. Using   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   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>

answered Oct 06 '13 at 18:28

Jukka K. Korpela

195,524
37
270
390

20

Re: nobr, mozilla warns "This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future." -- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr – Luke Aug 12 '14 at 22:02
1

@Luke, that’s a “standard” warning. They don’t describe any incompatibility (even a small one) and don’t mention any browser that does not support `nobr`; there are none. – Jukka K. Korpela Aug 13 '14 at 04:28
31

The `nobr` tag is in the same category as using `blink`: http://www.w3.org/TR/html5/obsolete.html#obsolete Either you work towards web standards or you work towards a chaotic web. The choice is yours. – Luke Aug 13 '14 at 22:24
@Luke, `nobr` has universal browser support, `blink` always had limited support and has now lost all, so if you put them into the same category... Re “standards”, note that you cite a document that says: “This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.” – Jukka K. Korpela Aug 14 '14 at 03:49
8

If you are using bootstrap, a class "text-nowrap" is already defined which sets the stype accordingly. – Ratatwisker Jul 09 '15 at 10:13
4

@JukkaK.Korpela, HTML5 is now finalized and, very unsurprisingly, `nobr` is still deprecated and _"must not be used"_. – Marcus Sep 14 '15 at 20:38
1

Haters may hate, but I think this is beautiful Jukka. You are invited to my Birthday party if you want to come – Jack Mar 12 '20 at 02:00
april 2022 & `nobr` still works – cloudxix Apr 04 '22 at 01:22

score 86 · Answer 2 · answered Oct 06 '13 at 18:18

86

CSS for that td: white-space: nowrap; should solve it.

answered Oct 06 '13 at 18:18

tcak

2,142
1
16
23

score 14 · Answer 3 · answered May 29 '14 at 18:42

14

If you need this for several words or elements, but can't apply it to a whole TD or similar, the Span tag can be used.

<span style="white-space: nowrap">Text to break together</span>
    or 
<span class=nobr>Text to break together</span>

If you use the class version, remember to set up the CSS as detailed in the accepted answer.

answered May 29 '14 at 18:42

Greg Little

3,360
2
19
16

I like the white-space property, didnt know about it – jksevend Feb 09 '22 at 14:26

score 3 · Answer 4 · answered Oct 06 '13 at 18:19

3

If the <i> tag isn't displayed as a block and causing the probelm then this should work:

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

answered Oct 06 '13 at 18:19

ameagher

328
2
12

score 3 · Answer 5 · answered Nov 28 '17 at 21:32

In some cases (e.g. html generated and inserted by JavaScript) you also may want to try to insert a zero width joiner:

.wrapper{
  width: 290px;   
  white-space: no-wrap;
  resize:both;
  overflow:auto; 
  border: 1px solid gray;
}

.breakable-text{
  display: inline;
  white-space: no-wrap;
}

.no-break-before {
  padding-left: 10px;
}

<div class="wrapper">
<span class="breakable-text">Lorem dorem tralalalala LAST_WORDS</span>&#8205;<span class="no-break-before">TOGETHER</span>
</div>

score 1 · Answer 6 · answered Jun 25 '18 at 19:05

This is the real solution:

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

css:

.inline-flag {
   position: relative;
   display: inline;
   line-height: 14px; /* play with this */
}

.inline-flag > i {
   position: absolute;
   display: block;
   top: -1px; /* play with this */
}

.inline-flag > span {
   margin-left: 18px; /* play with this */
}

Example, images which always before text:

score -1 · Answer 7 · answered Mar 08 '19 at 18:15

nobr is too unreliable, use tables

<table>
      <tr>
          <td> something </td>
          <td> something </td>
      </tr>
</table>

It all goes on the same line, everything is level with eachother, and you have much more freedom if you want to change something later.

Avoid line break between html elements

7 Answers7

Linked