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 をバックアップおよび復元する方法

推薦する

vue3.0 プロジェクトを素早く構築するための手順を完了する

目次1. 3.0をより適切にサポートするには、vue/cliのバージョンが4.5.0以上であることを...

HTML ページで JSON データを表示およびフォーマットする方法

JSONデータはHTMLページ上に表示されフォーマットされます1. 表示効果図説明:すべてのキー値は...

Linuxでホスト名を永続的に変更する方法

ホスト名を変更する場合は、以下の手順に従ってください。ホスト名の使用hostnameコマンドを使用す...

CSS で高さが不明な垂直中央揃えを実装する

この記事では主に、高さが不明な垂直方向の中央揃えを CSS で実装する方法を紹介し、皆さんと共有しま...

Nodeはバックエンドの実装手順を素早く構築します

1. まず、node、express、express-generator をインストールします (4...

Minio 軽量オブジェクト ストレージ サービスのインストールとブラウザの使用チュートリアル

目次導入インストール1. マウントするフォルダを作成する2. イメージをプルする3. コンテナを作成...

VMware 12 での Ubuntu 16.04 インストール チュートリアル

この記事では、VMware 12でのUbuntu 16.04のインストールチュートリアルを参考までに...

Firefox で Flash を再生するためのオブジェクトとパラメータの書き方

コードをコピーコードは次のとおりです。 <object classid="clsid...

LinuxサーバにおけるNginxとApacheの共存の実装方法の分析

この記事では、Linux サーバー上で Nginx と Apache の共存を実装する方法について説...

MySQL インストール図の概要

MySQL 5.5 のインストールと設定方法のグラフィックチュートリアルMySQL 5.5 のインス...

HTML+CSS をベースにした素敵なフリップログインおよび登録インターフェースを作成します

素敵なフリップログインと登録インターフェースを作成する序文最近、ネットワーク ディスクを構築しようと...

HTML 基本構造_Powernode Java アカデミー

多くの場合、Web ページ開発を学ぶときに最初に印象に残るのは、html または htm サフィック...

jQueryはキャンバスタグを使用して検証コードを描画します

<canvas> 要素は、クライアント側のベクター グラフィックス用に設計されています。...

Nginx Linux のインストールと展開の詳細なチュートリアル

1. Nginx の紹介Nginxは負荷分散やリバースプロキシにも使えるWebサーバーです。現在最も...

SQLでEXPLAINコマンドを使用する方法

日常業務では、実行に時間のかかる SQL ステートメントを記録するために、スロー クエリを実行するこ...