スパン要素の改行を防ぐ

私が持っている<span>私は、任意の改行せずに表示する要素を。どうやってやるの？

これをあなたのCSSに入れてください：

white-space:nowrap;

詳細はこちら：http : //www.w3.org/wiki/CSS/Properties/white-space

white-space

white-spaceプロパティは、要素内の空白の処理方法を宣言します。

価値観

normal この値は、ユーザーエージェントに一連の空白を折りたたみ、必要に応じて行ボックスを埋めるために改行するよう指示します。

pre この値は、ユーザーエージェントが空白のシーケンスを折りたたむことを防ぎます。改行は、ソースの改行、または生成されたコンテンツで「\ A」が発生したときにのみ改行されます。

nowrap この値は、「通常」の場合と同様に空白を折りたたみますが、テキスト内の改行を抑制します。

pre-wrap この値は、ユーザーエージェントが空白のシーケンスを折りたたむことを防ぎます。ソースの改行、生成されたコンテンツでの「\ A」の出現、および必要に応じて行ボックスを埋めるために、行が改行されます。

pre-line この値は、ユーザーエージェントに一連の空白文字を折りたたむように指示します。ソースの改行、生成されたコンテンツでの「\ A」の出現、および必要に応じて行ボックスを埋めるために、行が改行されます。

inherit 要素の親のプロパティと同じ指定値を取ります。

スペース文字の改行を防ぐだけでよい場合は 、単語間にエンティティを使用できます。

No line break

の代わりに

<span style="white-space:nowrap">No line break</span>

Bootstrap 4クラス：

text-nowrap

参照：https : //getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow

white-space: nowrap正しい解決策ですが、行の中断を防ぎます。2つの要素間の改行を防止するだけの場合は、少し複雑になります。

<p>
    <span class="text">Some text</span>
    <span class="icon"></span>
</p>

スパン間のブレークを防ぐが、「Some」と「text」間のブレークを許可するには、次のようにします。

p {
    white-space: nowrap;
}

.text {
    white-space: normal;
}

Firefoxにはそれで十分です。Chromeではさらに、スパン間の空白をに置き換える必要があります 。（空白の削除は機能しません。）