ホームページ > 記事 > ウェブフロントエンド > 表示を超えたCSS
CSS のオーバー表示とは、要素のコンテンツが指定された幅または高さを超えた場合に、オーバーフローしたコンテンツを処理する方法を指します。この場合、CSS によって提供されるいくつかのプロパティと値を使用して、その先のコンテンツの表示と非表示を制御し、ページ内でより美しく、読みやすく見えるようにすることができます。
CSS オーバーフロー プロパティ
要素のコンテンツが指定された幅または高さを超える場合、CSS のオーバーフロー プロパティを使用して、オーバーフローしたコンテンツの表示方法を制御できます。 overflow 属性の値は次のとおりです。
たとえば、固定高さの div にコンテンツを表示したい場合、コンテンツが div の高さを超える場合、オーバーフロー属性をスクロールまたは非表示に設定できます。
非常に長いコンテンツ
この例では、p 要素のコンテンツが高さ 200 ピクセルを超えると、ユーザーがスクロールしてコンテンツを表示できるように垂直スクロール バーが表示されます。
CSS text-overflow プロパティ
overflow プロパティを使用して超過コンテンツの表示モードを制御することに加えて、CSS の text-overflow プロパティを使用して表示モードを制御することもできます。テキストコンテンツが制限を超えた場合。 text-overflow 属性は、white-space 属性が nowrap に設定されている場合にのみ有効です。
text-overflow には次の 3 つの値があります。
たとえば、長いタイトルを 1 行で表示したい場合、タイトルのテキストが要素の幅を超える場合は、text-overflow 属性と White-space 属性を使用できます。
この例では、タイトル テキストが要素の幅を超える場合、省略記号が表示され、テキストが切り詰められていることをユーザーに知らせます。
CSS word-wrap 属性
overflow 属性と text-overflow 属性を使用して要素コンテンツのオーバーフローと切り捨てを制御することに加えて、CSS の word-wrap 属性を使用して次のこともできます。改行のテキスト単語を制御します。
デフォルトでは、単語が要素の幅を超える場合、単語は切り詰められて次の行に表示されます。ただし、単語が単語境界で切り詰められたり折り返されたりしないようにしたい場合は、word-wrap 属性を使用できます。
word-wrap 属性には、次の 2 つの値があります。
たとえば、長いテキストを限られた幅で表示したいが、すべての単語が境界で折り返され、余分なコンテンツがすべて切り取られるようにしたい場合は、次の CSS を使用できます。
結論
Web ページをデザインするときは、通常、コンテンツを可能な限りさまざまな画面サイズや解像度に適応させる必要があります。オーバーフロー コンテンツがページ上に正しく表示されるようにするために、オーバーフロー、テキスト オーバーフロー、ワード ラップなど、CSS で提供されるいくつかのプロパティと値を使用できます。これらは、ページ レイアウトやページをより明確で整然としたものにします。
以上が表示を超えたCSSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。