CSS スタイルでは、overflow:hidden はオーバーフローの非表示を意味します。その名前が示すように、overflow:hidden の最も単純な機能は、要素内のコンテンツがオーバーフローした場合に、オーバーフローした部分を非表示にすることです。 CSS における overflow:hidden の具体的な役割を見てみましょう。
overflow:hidden の最も単純な機能はオーバーフローを非表示にすることであるとすでに述べました。具体的な例を見てみましょう:
<html>
<head>
<style type="text/css">
div
{
background-color:pink;
width:150px;
height:150px;
overflow: hidden;
}
</style>
</head>
<body>
<div>
愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者的话。
唯有民族魂是值得宝贵的，唯有它发扬起来，中国才有真进步。
愈艰难，就愈要做。改革，是向来没有一帆风顺的。
我们目下的当务之急是：一要生存，二要温饱，三要发展。
必须敢于正视，这才可望敢想、敢说、敢做、敢当。
</div>
</body>
</html>効果は次のとおりです:
上記の効果から、テキストの外側の部分が見えなくなっていることがわかります。これは実際には、overflow:hidden のオーバーフロー非表示効果です。もちろんそうではありません。テキストのオーバーフローの非表示部分は見えないだけですが、実際にはまだ存在します。マウスを置いたときにテキストの非表示部分を表示したい場合は、CSS ナレッジの疑似クラス部分を使用する必要があります。具体的なコード例を見てみましょう:
<html>
<head>
<style type="text/css">
div
{
background-color:pink;
width:150px;
height:150px;
overflow: hidden;
}
div:hover{
overflow: visible;
}
</style>
</head>
<body>
<div>
愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者的话。
唯有民族魂是值得宝贵的，唯有它发扬起来，中国才有真进步。
愈艰难，就愈要做。改革，是向来没有一帆风顺的。
我们目下的当务之急是：一要生存，二要温饱，三要发展。
必须敢于正视，这才可望敢想、敢说、敢做、敢当。
</div>
</body>
</html>効果は次のとおりです:
上の図の効果は、マウスが文字上に配置すると、文字の隠れていた部分が表示されます。コード内に追加の div:hover{overflow:visible;} があり、:hover が CSS の疑似クラスであることがわかります。
この記事はここで終わります。さらに興味深い内容については、PHP 中国語 Web サイトの関連コラム チュートリアルをご覧ください。 ！ ！
以上がCSSにおけるoverflow:hiddenの役割は何ですか? overflow:hidden の役割の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
Jamstackサイトの複雑さの高まりとそれらの管理方法Apr 14, 2025 am 10:19 AMユーザーが生成したコンテンツまたは動的データを静的サイトに追加すると、ビルドプロセスの複雑さは、
野生のVue 3 CompositionAPIの初期の見方Apr 14, 2025 am 10:13 AM私は最近、実際のプロジェクトで新しいVue Composition APIを試して、それがどこに役立つか、将来どのように使用できるかを確認する機会がありました。
カスタムフォーカススタイルを少し楽しんでいますApr 14, 2025 am 10:11 AMすべてのフロントエンド開発者は、このシナリオを扱っているか、扱います。上司、クライアント、またはデザイナーは、ブラウザが集中した要素に適用されるアウトラインが適用されると考えています。
単純化された液体タイポグラフィApr 14, 2025 am 10:07 AMFluid Typographyは、画面のサイズ（またはおそらくそれらがあればコンテナクエリ）に応じて、フォントサイズ（およびおそらくラインハイトのような他のタイプの属性）が変化するという考えです。コアトリックは、ビューポートユニットから生まれます。文字通り設定できます
フレックスボックスレイアウトの背後にある思考プロセスApr 14, 2025 am 10:05 AM2つのボックスを並べて置く必要がありますが、FlexBoxはそのようなものが得意であると聞きました。
ダークモードのお気に入りApr 14, 2025 am 10:03 AMoooo！トーマス・シュタイナーの真正なトリック。 ChromeはまもなくSVG Favicons（例えば）をサポートします。そして、あなたはsvg内にcssを埋め込むことができます
私たちは、「今年あなたが興味を持っているウェブサイトを構築することはどうですか？」と尊敬するWeb開発者に尋ねました。Apr 14, 2025 am 09:57 AMCSS-Tricksで初めて、年末の一連の投稿を行うつもりです。アドベントカレンダーリフのように、私たちだけを見て、私たちは＆＃039;
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール
MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。
WebStorm Mac版
便利なJavaScript開発ツール
メモ帳++7.3.1
使いやすく無料のコードエディター
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
