div CSSはラップされません

Web ページを開発する場合、複数の要素を同じ行に表示する必要がある状況がよくありますが、過剰なコンテンツやブラウザのウィンドウ サイズ制限により、テキストが自動的に折り返され、ページ レイアウトに影響を与えます。この時点で、CSS スタイルを使用して要素を折り返さないように制御する必要があります。以下に改行を行わない方法を 2 つ紹介します。

1. ホワイトスペース属性を設定します

white-spaceこの属性は、複数の値を含む要素内のホワイトスペースの処理方法を制御できます:

• normal: デフォルト値。連続する空白文字を結合し、改行をスペースとして扱います。
• nowrap: 改行や空白文字の結合は許可しないでください。
• pre: 連続する空白文字は保持されますが、改行は許可されません。
• pre-wrap: 連続する空白文字を保持し、改行を許可します。
• pre-line: 連続する空白文字を結合し、改行を許可します。

white-space: nowrap 属性を使用すると、要素の自動行折り返しを禁止し、行折り返しを行わない効果を実現できます。たとえば、次のコードは、折り返さずに同じ行に 3 つのspan 要素を設定します。

<div>
  <span>第一个元素</span>
  <span>第二个元素</span>
  <span>第三个元素</span>
</div>

div {
  white-space: nowrap;
}

この時点では、要素内のテキスト コンテンツの量に関係なく、それらはすべて同じ行に表示されます。

2. float 属性を使用する

要素を同じ行に表示するもう 1 つの方法は、float 属性を使用することです。このプロパティは、要素を親要素の左側または右側にフロートさせ、要素の位置を変更します。同じ行上に配置されるすべての要素をフロートに設定することで、同じ行上にあるような効果を得ることができます。たとえば、以下のコードは 2 つの div 要素を float に設定し、それらが同じ行にあり、折り返されないようにします。

<div class="container">
  <div class="item">第一个元素</div>
  <div class="item">第二个元素</div>
</div>

.container {
  overflow: hidden; /*清除浮动*/
}
.item {
  float: left; /*将元素浮动*/
}

上記のコードでは、親要素に overflow: hidden 属性を追加しました。これは、親要素の高さに対するフローティング要素の影響を解決するためです。 float 要素の高さが親要素の高さを占めなくなりました。float をクリアしないと、要素が重なったり、親要素の高さが不正確になったりする可能性があります。したがって、通常はフロートをクリアするためにこの属性を追加します。

さらに、float を使用する場合の欠点は、float をクリアすることを考慮する必要があることです。そうしないと、後続の要素のレイアウトに影響を与える可能性があります。この問題を回避するには、常にフローティング要素にクリアフローティング スタイルを追加することを忘れないでください。

要約すると、white-space 属性を使用しても float 属性を使用しても、要素を同じ行に表示する効果は得られますが、実装方法に違いがあります。特定の開発では、実際の状況に応じてさまざまな方法を選択できます。ただし、どの方法を使用する場合でも、予期せぬ問題を防ぐために、ページ レイアウトの整合性を十分に考慮する必要があります。

以上がdiv CSSはラップされませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。