私はこの<td>要素を持っています:
<td><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>
これを1行にまとめたいと思っていましたが、これが得られます。
ご覧のとおり、フラグと電話番号は別の行にあります。は 電話番号の番号の間で機能していますが、フラグと電話番号の間では機能していません。
レンダラーによって改行がまったく導入されないようにするにはどうすればよいですか?
コンテンツの改行を防ぐ方法はいくつかあります。使用 は 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>タグがブロックとして表示されず、問題を引き起こしている場合、これは機能するはずです。
<td style="white-space:nowrap;"><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>