HTML要素間の改行を避ける

私はこの<td>要素を持っています：

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

私はこれを単一の行に保つことを望んでいましたが、これは私が得るものです：

ご覧のとおり、旗と電話番号は別々の行にあります。 電話番号の数字の間ではなく、フラグと電話番号の間に働いています。

レンダラーによって改行がまったく導入されないようにするにはどうすればよいですか？

コンテンツの改行を防ぐ方法はいくつかあります。使用 は1つの方法であり、単語間で正常に機能しますが、空の要素と一部のテキストの間で使用しても、明確な効果はありません。同じことが、アイコンに画像を使用する、より論理的でアクセスしやすい方法にも当てはまります。

最も堅牢な代替手段はnobrマークアップを使用することです。これは非標準ですが、普遍的にサポートされており、CSSが無効になっている場合でも機能します。

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

（ この場合、スペースの代わりに使用できますが、必須ではありません。）

別の方法はnowrap属性です（非推奨/廃止されましたが、いくつかのまれな癖を除いて、引き続き正常に動作します）。

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

次に、CSS対応のブラウザーで機能するCSSの方法があり、もう少しコードが必要です。

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

そのtdのCSS：white-space: nowrap;それを解決する必要があります。

複数の単語または要素にこれが必要だが、TD全体または類似のものに適用できない場合は、Spanタグを使用できます。

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

クラスバージョンを使用する場合は、承認された回答に記載されているとおりにCSSを設定してください。

場合は<i>タグがブロックとして表示され、probelmの原因ではない、これは動作するはずです：

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

場合によっては（JavaScriptによって生成および挿入されたHTMLなど）、幅がゼロのジョイナーを挿入することもできます。

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

これが本当の解決策です：

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

例、常にテキストの前にある画像：

nobrは信頼性が高すぎます。テーブルを使用してください

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

それはすべて同じ線上にあり、すべてがお互いに同じレベルであり、後で何かを変更したい場合は、はるかに多くの自由があります。