ホームページ  >  記事  >  ウェブフロントエンド  >  CSSでオーバーフロー非表示を設定する方法

CSSでオーバーフロー非表示を設定する方法

藏色散人
藏色散人オリジナル
2021-04-02 10:50:075166ブラウズ

CSS でオーバーフロー非表示を設定する方法: 最初に HTML サンプル ファイルを作成し、次に本文に p タグのコンテンツを定義し、最後に「overflow:hidden」属性を通じてオーバーフロー非表示を設定します。

CSSでオーバーフロー非表示を設定する方法

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、DELL G3 コンピューター

CSS では、overflow 属性とオーバーフローの非表示を設定するには、overflow:hidden を使用します。

オーバーフロー属性

オーバーフロー属性は、コンテンツが要素ボックスからオーバーフローした場合に何が起こるかを指定します。

この属性は、要素のコンテンツ領域をオーバーフローするコンテンツがどのように処理されるかを定義します。値がスクロールの場合、ユーザー エージェントは、必要かどうかに関係なく、スクロール メカニズムを提供します。したがって、すべてが要素ボックス内に収まる場合でも、スクロールバーが表示される可能性があります。

注: すべての主要なブラウザはオーバーフロー属性をサポートしています。

可能な値

visible: デフォルト値。コンテンツはトリミングされず、要素ボックスの外側にレンダリングされます。

hidden: コンテンツはトリミングされ、残りのコンテンツは非表示になります。

scroll: コンテンツはトリミングされますが、ブラウザーには残りのコンテンツを表示するためのスクロール バーが表示されます。

auto: コンテンツがトリミングされると、ブラウザーには残りのコンテンツを表示するためのスクロール バーが表示されます。

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div {
background-color: pink;
width: 150px;
height: 150px;
overflow: hidden
}
</style>
</head>
<body>
<p>如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。</p>
<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,
用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。
默认值是 visible。
</div>
</body>
</html>

レンダリング:

CSSでオーバーフロー非表示を設定する方法

推奨学習:「css ビデオ チュートリアル

以上がCSSでオーバーフロー非表示を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。