Unikaj łamania linii między elementami HTML

Mam ten <td>element:

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

Miałem nadzieję, że uda mi się to utrzymać w jednej linii, ale otrzymałem to:

Jak widać, flaga i numer telefonu znajdują się w osobnych wierszach.  Pracują między numerami numer telefonu, ale nie między flagą i numerem telefonu.

Jak mogę się upewnić, że mechanizm renderujący nie wprowadzi żadnego podziału wiersza?

Istnieje kilka sposobów zapobiegania łamaniu linii w treści. Używanie  jest jednokierunkowe i działa dobrze między słowami, ale używanie go między pustym elementem a tekstem nie daje dobrze zdefiniowanego efektu. To samo dotyczy bardziej logicznego i bardziej dostępnego podejścia, w którym używa się obrazu jako ikony.

Najbardziej niezawodną alternatywą jest użycie nobrniestandardowych, ale powszechnie obsługiwanych znaczników, które działają nawet wtedy, gdy CSS jest wyłączony:

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

(W tym przypadku możesz, ale nie musisz, używać  zamiast spacji).

Innym sposobem jest nowrapatrybut (przestarzały / przestarzały, ale nadal działa dobrze, z wyjątkiem kilku rzadkich dziwactw):

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

Jest też sposób CSS, który działa w przeglądarkach obsługujących CSS i wymaga nieco więcej kodu:

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

CSS dla tego td: white-space: nowrap;powinno to rozwiązać.

Jeśli potrzebujesz tego dla kilku słów lub elementów, ale nie możesz zastosować tego do całego TD lub podobnego, możesz użyć znacznika Span.

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

Jeśli używasz wersji klasowej, pamiętaj, aby skonfigurować CSS zgodnie z zaakceptowaną odpowiedzią.

Jeśli <i>tag nie jest wyświetlany jako blok i powoduje problem, to powinno działać:

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

W niektórych przypadkach (np. Html generowany i wstawiany przez JavaScript) możesz również spróbować wstawić łącznik o zerowej szerokości:

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

To jest prawdziwe rozwiązanie:

<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 */
}

Przykład, obrazy, które zawsze przed tekstem:

nobr jest zbyt zawodny, użyj tabel

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

Wszystko toczy się według tej samej linii, wszystko jest ze sobą wyrównane i masz znacznie większą swobodę, jeśli chcesz coś zmienić później.