ホームページ > ウェブフロントエンド > CSSチュートリアル > DIV からオーバーフローしたコンテンツを非表示にする方法

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

php中世界最好的语言
リリース: 2017-11-23 14:17:32
オリジナル
4867 人が閲覧しました

通常、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="http://www.php.cn" /> 
</div>
ログイン後にコピー

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

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

その他

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

関連記事:

HTMLでのDIVの使い方

HTML5

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート