CSS の overflow: hidden の使い方 (オーバーフローの非表示とフロートのクリア)

CSS の overflow: hidden の使い方 (オーバーフローの非表示とフロートのクリア)

オーバーフロー非表示

指定された高さを超えるテキストや画像情報を非表示にすることを意味します。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
	<メタ文字セット="UTF-8">
	<title>ドキュメント</title>
	<スタイル タイプ="text/css">
		div {背景色: 黄色;幅: 350px;高さ: 100px;オーバーフロー: 非表示;}
	</スタイル>
</head>
<本文>
<p> 要素内のコンテンツが指定された幅と高さの属性を超える場合、overflow 属性 <br> によって表示方法とスクロール バーを表示するかどうかを決定できます。 </p>
<div> この属性は、要素のコンテンツ領域からオーバーフローしたコンテンツに対して何が起こるかを定義します。 <br>値が非表示の場合、範囲外の部分は非表示になります。 <br>値が scroll の場合、スクロール バーが表示されます。 <br>値が表示可能な場合、余分な部分は要素ボックスの外側にレンダリングされます。 <br>値が auto の場合は自動で、テキストが要素ボックスを超えるとスクロール バーが表示され、超えない場合はスクロール バーは表示されません。 <br>値が inherit の場合、親要素の overflow 属性の値が継承されます。 </div>
</本文>
</html>

以下の数字は、値が非表示の場合と値が自動の場合にそれぞれインターセプトされます。

もう 1 つは、テキスト情報を 1 行で表示し、余分な部分を省略記号で表示することです (強調: 効果的に表示するには、1 行のテキストで表示する必要があります)。

div {
    背景色: 黄色;
    幅: 350ピクセル;
    マージン: 100px 自動;
    white-space: nowrap;/*強調されたテキストは1行で表示されます*/
    overflow: hidden;/*オーバーフローしたコンテンツは非表示*/
    text-overflow: ellipsis;/*オーバーフローテキストには省略記号が表示されます*/
    }

クリアフロート<br /> この左右レイアウトは、レイアウトでよく使用されます。親ボックスには、左と右の 2 つの子ボックスが含まれます。ただし、子のコンテンツの数とサイズは不確定であるため、親ボックスの高さを固定することはできません。親ボックスの高さは、子ボックスの高さに応じて変更する必要があります。以下で確認してみましょう!

以下は親ボックスに高さ 200px を指定し、2 つの子ボックスを左右にフロートさせているため、表示に問題はありません。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
	<メタ文字セット="UTF-8">
	<title>ドキュメント</title>
	<スタイル タイプ="text/css">
		* {マージン: 0;パディング: 0}
		.header {背景色: #333;色: #fff;テキスト配置: center;高さ: 80px;行の高さ: 80px;}
		.father_box {幅: 500px;高さ: 200px;余白: 0 auto;背景色: 黄色;}
		.child_left {幅: 100px;高さ: 100px;背景色: 青;フロート: 左;}
		.child_right {幅: 200px;高さ: 150px;背景色: 青;フロート: 右;}
		.footer {背景色: #333;色: #fff;テキスト配置: center;高さ: 80px;行の高さ: 80px;}
	</スタイル>
</head>
<本文>
	<div class="header">ここにヘッダー</div>
	<div class="father_box">
		<div class="child_left">子の左</div>
		<div class="child_right">子の権利</div>
	</div>
	<div class="footer">フッ​​ターはここにあります</div>
</本文>
</html>

右側のボックスの内容が増えると、親ボックスの高さも増えるはずです。このとき、通常は親ボックスの高さを削除して、親ボックスを高さに適応させますが、結果は次のようになります。 2 つの子ボックスがフッターを覆います。これは、2 つの子がフローティングによって標準フローから外れていますが、親ボックスには高さがないため、親ボックスはコンテンツがないと認識し、コンテンツによって高さが引き伸ばされず、親の高さが 0px であることと同等になるためです。その後、同じレベルのフッター ボックスは標準フローに従って配置され、同じレベルの黄色の親ボックスの隣に配置されるため、ページのレイアウトが乱れます (ページが折りたたまれるとも呼ばれます)。

このとき、親ボックスに overflow:hiffen を追加します。するとページは次のようになり、子ボックスが大きくなるにつれて親ボックスの高さも大きくなります。

以前のバージョンの IE で overflow:hidden; がこの効果を実現しない場合は、zoom:1; を追加します。つまり、overflow:hidden;zoom:1; となります。

この原則は、実際には「ブロック フォーマット コンテキスト」を意味する BFC (Block formatting context) と呼ばれる概念です。 BFC は独立したレンダリング領域を定義し、その内部のブロックレベル要素のレンダリング規則を規定します。そのレンダリング効果は外部環境の影響を受けません。

BFC に興味のある友人は、BFC についてさらに詳しく知ることができます。

画像を挿入した後、画像の下部に空白スペースができる問題を解決します<br /> 画像を挿入した後、ボックスには高さが指定されていないため、画像の高さだけ引き伸ばされ、数ピクセルの隙間が残ります(赤い部分)。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
	<スタイル タイプ="text/css">
		* {マージン: 0;パディング: 0;リストスタイル: なし;}
		.box {幅: 200px;背景色: 赤;余白: 0 自動;}
	</スタイル>
</head>
<本文>
	<div class="box">
		<img src="img02.jpg" 幅="200" 高さ="200" alt="">
	</div>
</本文>
</html>

解決策は2つあります。

1. 親ボックスに画像と同じ高さを追加し、overflow:hidden; を追加します (この 2 つを追加すると互換性が向上します)。

2. ボックスに高さを追加する必要はなく、画像の高さに合わせて調整し、img に display:block を追加します。

上記は、インターネット上の大物やオンライン記事の共有に基づいた、overflow:hidden についての私の理解です。より多くの人々のお役に立てれば幸いです。

<<:  あまり多くのコードを書かずに、ハイパーリンクを使ってシンプルで美しいカスタムチェックボックスを実装できます。

>>:  Xtrabackup を使用して MySQL をバックアップおよび復元する方法

推薦する

Typescriptを使用してWeChatミニプログラムを開発するための詳細な手順

Typescript の利点については詳しく説明する必要はありません。ご興味があれば、(https:...

MySQL 8.0.17 をインストールしてリモート アクセスを構成する方法

1. インストール前の準備データベースのバージョンを確認するコマンド: mysql --versio...

Linuxでテキスト比較を実現するコツを教えます

序文コードを書く過程で、必然的にコードに何らかの変更を加えることになります。しかし、変更を加えるとき...

Vueダイナミックフォームの詳細な応用

概要バックグラウンド管理システムには多くのフォーム要件があります。データをjson 形式で書き込み、...

crontab の実行結果を電子メールでユーザーに通知する方法

症状Centos7 ホストに crontab タスクを設定しましたが、時間が来るとメールを実行して「...

MySQL 5.7 のルートパスワードログイン問題の解決策

前回の記事でMySQLサービスが起動しない問題が解決したと分かった後、パスワードなしでrootユーザ...

HTML コード内のスペースと空白行についての簡単な説明

HTML コード内の連続するスペースまたは空白行 (改行) はすべて 1 つのスペースとして表示され...

JS配列メソッドの詳細な説明

目次1. 元の配列が変更されます1. プッシュ(): 2.ポップ(): 3. シフト(): 4.un...

MySQLでルートユーザーのパスワードを変更する方法

方法1: SET PASSWORDコマンドを使用する mysql> username@loca...

MySQLカスタム関数の簡単な使用例

この記事では、例を使用して MySQL カスタム関数の使用方法を説明します。ご参考までに、詳細は以下...

Linux でソースインストールされたパッケージを簡単に削除する方法

ステップ1: Stowをインストールするこの例では CentOS を使用しているため、拡張 EPEL...

mysql8.0.18 で winx64 をインストールするための詳細なチュートリアル (画像とテキスト付き)

MySQLデータベースをダウンロードするには、https://dev.mysql.com/down...

Windows Server 2019 のインストール (グラフィカル チュートリアル)

Windows Server 2019 は、Microsoft が公式にリリースした最新のサーバー...

ChromeとIEに対応したWMPに埋め込まれたHTMLの詳細な紹介

実際には、対応する記述方法は多数ありますが、最も一般的なのは object + embedded で...

MySQLのユーザー権限の確認と管理方法の詳細な説明

この記事では、例を使用して、MySQL ユーザー権限を確認および管理する方法を説明します。ご参考まで...