CSS のオーバー表示とは、要素のコンテンツが指定された幅または高さを超えた場合に、オーバーフローしたコンテンツを処理する方法を指します。この場合、CSS によって提供されるいくつかのプロパティと値を使用して、その先のコンテンツの表示と非表示を制御し、ページ内でより美しく、読みやすく見えるようにすることができます。

CSS オーバーフロー プロパティ

要素のコンテンツが指定された幅または高さを超える場合、CSS のオーバーフロー プロパティを使用して、オーバーフローしたコンテンツの表示方法を制御できます。 overflow 属性の値は次のとおりです。

• visible: 余分なコンテンツは要素の外側に表示され、他の要素を隠してしまう可能性があります。
• hidden: 余分なコンテンツは切り取られ、ページには表示されません。
• scroll: コンテンツがオーバーフローした場合、ユーザーがスクロールできるようにスクロール バーが表示されます。
• auto: コンテンツがオーバーフローした場合はスクロール バーが表示され、そうでない場合は通常どおりコンテンツが表示されます。

たとえば、固定高さの div にコンテンツを表示したい場合、コンテンツが div の高さを超える場合、オーバーフロー属性をスクロールまたは非表示に設定できます。

この例では、p 要素のコンテンツが高さ 200 ピクセルを超えると、ユーザーがスクロールしてコンテンツを表示できるように垂直スクロール バーが表示されます。

CSS text-overflow プロパティ

overflow プロパティを使用して超過コンテンツの表示モードを制御することに加えて、CSS の text-overflow プロパティを使用して表示モードを制御することもできます。テキストコンテンツが制限を超えた場合。 text-overflow 属性は、white-space 属性が nowrap に設定されている場合にのみ有効です。

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

• clip: テキストが超過すると切り取られ、ページに表示されません。
• ellipsis: テキストを超える場合は省略記号が表示されます。
• string: 指定した文字列がテキストの外に表示されます。

たとえば、長いタイトルを 1 行で表示したい場合、タイトルのテキストが要素の幅を超える場合は、text-overflow 属性と White-space 属性を使用できます。

これは長い、長い、長いタイトルです

この例では、タイトル テキストが要素の幅を超える場合、省略記号が表示され、テキストが切り詰められていることをユーザーに知らせます。

CSS word-wrap 属性

overflow 属性と text-overflow 属性を使用して要素コンテンツのオーバーフローと切り捨てを制御することに加えて、CSS の word-wrap 属性を使用して次のこともできます。改行のテキスト単語を制御します。

デフォルトでは、単語が要素の幅を超える場合、単語は切り詰められて次の行に表示されます。ただし、単語が単語境界で切り詰められたり折り返されたりしないようにしたい場合は、word-wrap 属性を使用できます。

word-wrap 属性には、次の 2 つの値があります。

• normal: 単語は境界で分割され、切り捨てられません。
• break-word: 単語は可能な限り分割され、長すぎる場合は切り捨てられます。

たとえば、長いテキストを限られた幅で表示したいが、すべての単語が境界で折り返され、余分なコンテンツがすべて切り取られるようにしたい場合は、次の CSS を使用できます。

これは長い、長い、長いテキストです。多くの単語が含まれていますが、単語は境界で折り返され、切り捨てられません。

結論

Web ページをデザインするときは、通常、コンテンツを可能な限りさまざまな画面サイズや解像度に適応させる必要があります。オーバーフロー コンテンツがページ上に正しく表示されるようにするために、オーバーフロー、テキスト オーバーフロー、ワード ラップなど、CSS で提供されるいくつかのプロパティと値を使用できます。これらは、ページ レイアウトやページをより明確で整然としたものにします。

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