CSSでwhite-space:nowrapを使用する方法

white-space:nowrap は通常、特別な状況で使用されます。今日は、誰もがwhite-space:nowrapにもっと慣れることができるように、その文法構造とデフォルトのパラメーターを学習します。テキストを同じ行に配置すると、すべてのテキスト コンテンツが折り返されずに 1 行に表示されます。

CSS の幅がどれだけ設定されていても、テキストが自動的に折り返されないようにします。すべてのテキストは 1 行で表示されます。特にタイトルリストでは、1行に1つのタイトルコンテンツのみを表示したいのですが、幅が制限されており、タイトルテキストが多すぎる

width

（幅）が制限されているため、テキストが自動的に折り返されてしまうことがあります。もちろん、余分なテキストコンテンツを非表示にするために、CSS overflow:hidden スタイルを追加できます。 ホワイトスペース構文と構造

ホワイトスペース構文:

ホワイトスペース: 通常のnowrap

ホワイトスペースパラメータ:

normal: デフォルトの処理方法

nowrap: すべてのテキストを強制的に同じ上に表示するline until テキストは終了するか、br タグ

オブジェクト

に遭遇するまで改行されます。改行を強制的に行わないようにするには、white-space:nowrap を使用することをお勧めします。 white-space の説明:

white-space は、オブジェクト内のテキスト表示モードを設定または取得します。通常、これを使用して、コンテンツを強制的に 1 行で表示します

通常、white-space:nowrap を使用して、テキスト コンテンツが折り返されないよう強制し、オブジェクト内のすべてのテキスト コンテンツを 1 行で表示します。

ホワイトスペースの実践例

2 つのオブジェクト ボックスを設定しました。1 つの設定は、ピアにテキスト コンテンツを表示するように強制します。 2 番目の設定では、ピアを強制的に表示しますが、HTML br タグを使用して効果を観察します。ホワイトスペースケースの適用効果として、CSS の幅を 120 ピクセル、CSS の高さを 60 ピクセル、CSS の行の高さ

line-height

を 20 ピクセルに設定しました。 1. CSS コード

2. HTML コード スニペット

コンテンツは強制的に 1 行で表示されます

コンテンツは折り返されますbr
を使用すると
行の折り返し