1. ホーム
  2. html

[解決済み] html要素間の改行を避ける [重複]。

2022-02-10 15:11:33

質問事項

私はこれを持っています <td> 要素を使用します。

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

これを1行に収めたかったのですが、こんな感じになってしまいました。

ご覧の通り、国旗と電話番号が別行動になっています。また &nbsp; は電話番号の数字の間に働いていますが、国旗と電話番号の間には働いていません。

レンダラーで改行が全く入らないようにするにはどうしたらいいですか?

どのように解決するのですか?

コンテンツの改行を防ぐには、いくつかの方法があります。使用方法 &nbsp; は一つの方法で、単語と単語の間ではうまく機能しますが、空の要素といくつかのテキストの間で使用すると、うまく定義された効果を得ることができません。同じことが、より論理的でわかりやすい方法として、アイコンに画像を使用する場合にも当てはまります。

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

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

(を使用することは可能ですが、使用する必要はありません。 &nbsp; この場合、スペースの代わりに)

別の方法として 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>