DIV からオーバーフローしたコンテンツを非表示にする方法

通常、Web ページをレイアウトするときは、高さの制限を超えるテキスト コンテンツが多すぎるという問題が常に発生します。その場合、DIV がバーストし、Web ページがずれて乱雑になる画像がいくつか発生します。では、どうすれば問題を解決できるのでしょうか？

次に、CSS を使用して、DIV レイアウトを壊すことなく、設定された CSS 幅と CSS 高さを超えるコンテンツを自動的に非表示にする方法を解決する必要があります。

特にIE6では、コンテンツが

オブジェクトの高さと幅を超えると、バーストして高さが増加します。このとき、次の解決策を使用できます。

CSS スタイルの解決策

現時点では、CSS

overflowStyle 解決策を使用できます:

対応するスタイル overflow:hidden

Div{overflow:hidden}

このように設定した後、DIV オブジェクトが特定の幅と高さの場合、overflow:hidden を追加すると、画像を含む DIV の幅と高さを超えるコンテンツが非表示になります。

関連読書: CSS はオーバーフローを実装し、テキスト コンテンツを超えて省略記号を表示します

過剰なコンテンツの場合を非表示にする

1. オブジェクトの幅と高さを超えるテキスト コンテンツを非表示にします

レイアウトで美しく配置すると、場合によってはオブジェクトの高さと幅を設定する必要があります。その後修正されましたが、この時点では、コンテンツとテキストがどれほど多くても、レイアウトは設定された幅と高さを超えてはいけないことに注意する必要があります。助けるために overflow:hidden が必要です。

CSS コード:

<style> 
.div{ width:300px; height:50px; line-height:25px; overflow:hidden} 
/* 设置对象高度宽度，同时设置overflow:hidden */ 
</style>

Html コード:

<div class="div">欢迎，

ここで CSS を学び、必要なリソースをダウンロードできます。

同時に、独自の

FAQ回答 を見つけることができます。壊れたコンテンツ メソッド

は、このように overflow:hidden を設定します。コンテンツの量に関係なく、オブジェクトは、設定された幅と高さを超えて収まらないコンテンツを非表示にします。

ここでは、一定のCSS幅とCSS高さのオブジェクトボックスを設定し、大きな画像を配置し、overflow:hiddenを使用して余分な部分を非表示にします。

Css コード

<style> 
.div{ width:300px; height:50px; line-height:25px; overflow:hidden} 
/* 设置对象高度宽度，同时设置overflow:hidden */ 
</style>

Html コード

<div class="div"> 
<img  src="/static/imghwm/default1.png"  data-src="http://www.php.cn"  class="lazy"   / alt="DIV からオーバーフローしたコンテンツを非表示にする方法" > 
</div>

したがって、コンテンツがオブジェクトによって設定された幅と高さの制限を超えないようにする場合は、overflow:hidden を使用して余分な部分を非表示にします。

オーバーフローの隠されたヒントがたくさんあります。よりエキサイティングな

その他

関連記事については、php中国語ウェブサイトにご注意ください!

関連記事:

HTMLでのDIVの使い方

HTML5

タグの使い方

HTML文書型宣言の書き方

以上がDIV からオーバーフローしたコンテンツを非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。