DIV 境界線からはみ出したコンテンツを非表示にする方法

通常レイアウトする場合、コンテンツが DIV 境界線の幅と高さの制限を超えることがあります。これにより、Web ページがずれて乱雑になります。これは特に見苦しく、ユーザー エクスペリエンスが非常に低下します。コンテンツを非表示にするにはどうすればよいですか。 DIVの境界を越える？今日はこのチュートリアルをお届けします。

CSS スタイルを使用して、DIV 境界線の幅と高さを超えてオーバーフローするコンテンツを自動的に非表示にする方法

通常、レイアウトするときに、一部のテキスト コンテンツが制限をオーバーフローする高さを超え、一部の 画像 が DIV をバーストし、ウェブページの位置がずれる事故。

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

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

1. CSS スタイルを解決します

この時点で、CSS overflowStyle ソリューションを使用できます:

対応するスタイル overflow:hidden

Div{overflow:hidden}

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

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

2. 余分なコンテンツを非表示にするケース

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

CSSコード:

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

<p class="pcss5">欢迎，
</p>

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

2. オブジェクトの幅を超える部分の画像を非表示にするケース

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

Css コード

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

Html コード

<p class="pcss5"> 
<img  src="/static/imghwm/default1.png"  data-src="http://www.php.cn"  class="lazy"   / alt="DIV 境界線からはみ出したコンテンツを非表示にする方法" > 
</p>

画像は大きいですが、幅と高さを設定します

要約すると、コンテンツがオブジェクトによって設定された幅と高さの制限を超えないようにする場合は、次のようになります。余分なものを隠すには、overflow:hidden を使用するだけです。

関連書籍:

DIV にスクロール バーを設定する方法

CSS を使用して DIV を中央に配置する方法

DIV スクロール バーのプロパティとスタイルを設定する方法の紹介

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