Vermeiden Sie Zeilenumbrüche zwischen HTML-Elementen

Ich habe dieses <td>Element:

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

Ich hatte gehofft, dies in einer einzigen Zeile zu halten, aber das bekomme ich:

Wie Sie sehen können, stehen Flagge und Telefonnummer in getrennten Zeilen. Sie  arbeiten zwischen den Nummern der Telefonnummer, aber nicht zwischen Flag und Telefonnummer.

Wie kann ich sicherstellen, dass der Renderer überhaupt keinen Zeilenumbruch einführt?

Es gibt verschiedene Möglichkeiten, Zeilenumbrüche im Inhalt zu verhindern. Die Verwendung  ist eine Möglichkeit und funktioniert gut zwischen Wörtern, aber die Verwendung zwischen einem leeren Element und einem Text hat keinen genau definierten Effekt. Gleiches gilt für den logischeren und zugänglicheren Ansatz, bei dem Sie ein Bild für ein Symbol verwenden.

Die robusteste Alternative ist die Verwendung von nobrMarkup, das nicht dem Standard entspricht, aber universell unterstützt wird und auch bei deaktiviertem CSS funktioniert:

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

(  In diesem Fall können, müssen Sie jedoch keine Leerzeichen verwenden.)

Ein anderer Weg ist das nowrapAttribut (veraltet / veraltet, funktioniert aber bis auf einige seltene Macken immer noch einwandfrei):

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

Dann gibt es den CSS-Weg, der in CSS-fähigen Browsern funktioniert und etwas mehr Code benötigt:

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

CSS für das td: white-space: nowrap;sollte es lösen.

Wenn Sie dies für mehrere Wörter oder Elemente benötigen, es aber nicht auf einen ganzen TD oder ähnliches anwenden können, kann das Span-Tag verwendet werden.

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

Wenn Sie die Klassenversion verwenden, denken Sie daran, das CSS wie in der akzeptierten Antwort beschrieben einzurichten.

Wenn das <i>Tag nicht als Block angezeigt wird und das Problem verursacht, sollte dies funktionieren:

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

In einigen Fällen (z. B. durch JavaScript generiertes und eingefügtes HTML) möchten Sie möglicherweise auch versuchen, einen Joiner mit einer Breite von Null einzufügen:

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

Dies ist die wirkliche Lösung:

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

Beispiel Bilder, die immer vor Text stehen:

nobr ist zu unzuverlässig, benutze Tabellen

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

Es geht alles auf die gleiche Linie, alles ist auf gleicher Höhe und Sie haben viel mehr Freiheit, wenn Sie später etwas ändern möchten.