cssが部分表示を超える

CSS のオーバーフロー処理とは、要素内のコンテンツがコンテナーのサイズを超えた場合の状況を処理する方法を指します。通常、ブラウザーはコンテナーのサイズに基づいてコンテナー内のコンテンツのサイズと位置を自動的に調整しますが、コンテンツがコンテナーを超える場合の表示効果を制御できるようにしたい場合があります。この記事ではCSSでの過剰表示の対処法やテクニックを紹介します。

1. オーバーフロー属性

CSS では、オーバーフロー属性を使用してコンテナ内のコンテンツのオーバーフローを処理できます。この属性には次の 4 つの値があります。

1. visible: デフォルト値。コンテンツがコンテナからオーバーフローし、コンテナの外に表示されることを許可します。
2. hidden: コンテンツがコンテナーの外で非表示になることを示します。言い換えれば、この値はオーバーフローの内容を切り取って非表示にします。
3. scroll: コンテンツがコンテナ内でスクロールすることを示します。この値により、コンテナ内にスクロール バーが作成され、コンテンツをスクロールできるようになります。
4. auto: オーバーフローしたコンテンツがコンテナーに収まる場合、処理は行われません。オーバーフローしたコンテンツが収まらない場合は、スクロール バーが表示されます。

2. text-overflow 属性

text-overflow 属性は、オーバーフロー テキストの処理方法を制御できます。これは、インライン ブロック レベル要素またはインライン要素にのみ適用されます。これらの要素は、テキストの自動行折り返しを完了できます。

text-overflow には次の 3 つの値があります:

1. clip: デフォルト値。テキストがコンテナを超える場合、テキストは直接切り取られます。
2. 省略記号: テキストがコンテナーを超える場合、省略記号で表されます。
3. 文字列: カスタムの省略記号。このプロパティを使用して、任意の文字列の省略記号をカスタマイズできます。

3. ホワイトスペース属性

ホワイトスペース属性は、テキストを自動的に折り返すかどうか、オーバーフローテキスト表示で「スペース」を無視するかどうか、および「スペース」の処理方法を制御できます。スペース」。

この属性には次の 3 つの値があります:

1. normal: デフォルト値。テキストが自動的に折り返され、余分な「スペース」が無視されることを示します。
2. nowrap: テキストが自動的に折り返されないことを示します。テキストがコンテナの幅を超えると、コンテナから直接オーバーフローします。
3. pre-wrap: 「スペース」は保持されますが、行は自動的に折り返されることを示します。

4. 複数列レイアウト columns-layout

CSS の複数列レイアウトを使用すると、コンテナ内のコンテンツを複数の列に分割して表示することができ、コンテンツの 1 列がコンテナを超えています。

column-count 属性を使用して複数の列の列数を定義したり、column-gap を使用して列間の距離を定義したり、column-rule を使用して列間の境界線スタイルを定義したりできます。

5. インライン要素 (画像など) を強制的に水平方向に配置する

画像 () など、一部の要素はデフォルトではブロックレベルの要素であり、それらが占有します。別の行。複数の画像を同じ行に配置したい場合は、display:inline-block を使用してこれらの要素をインライン要素に変換できます。

結論

この記事では、CSS でオーバーフロー コンテンツを処理するいくつかの方法を紹介します。これらの方法を合理的に使用することで、ページのレイアウトと表示効果を制御できます。 CSS レイアウトについて詳しく知りたい場合は、関連ドキュメントを参照してください。

以上がcssが部分表示を超えるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。