ホームページ  >  記事  >  ウェブフロントエンド  >  overflow-y 属性の使用方法

overflow-y 属性の使用方法

青灯夜游
青灯夜游オリジナル
2019-02-12 15:45:235837ブラウズ

overflow-y 属性は、要素がコンテンツ領域からオーバーフローした場合に、コンテンツの上端/下端をトリミングするかどうかを指定するために使用されます。

overflow-y 属性の使用方法

#CSS3 オーバーフロー y 属性

関数:オーバーフロー y 属性要素のコンテンツ領域をオーバーフローした場合に、上端/下端のコンテンツをクリップするかどうかを指定します。

ヒント: overflow-x 属性を使用して、左端と右端が切り取られるかどうかを決定します。

構文:

overflow-y: visible|hidden|scroll|auto|no-display|no-content;

visible: コンテンツは切り取られず、コンテンツ ボックスの外側に表示される場合があります。

hidden: 切り取られたコンテンツ - スクロール機構は提供されていません。

scroll: コンテンツのトリミング - スクロール メカニズムを提供します。

auto: ボックスがオーバーフローした場合には、スクロール機構を提供する必要があります。

no-display: コンテンツがコンテンツ ボックスに収まらない場合は、ボックス全体を削除します。

no-content: コンテンツ ボックスに収まらない場合は、コンテンツ全体を非表示にします。

注: すべての主要なブラウザは overflow-y 属性をサポートしていますが、IE8 以前のブラウザでは正しく機能しません。

#CSS3 Overflow-y 属性の使用例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style> 
div
{
width:110px;
height:110px;
border:thin solid black;
overflow-x:hidden;
overflow-y:hidden;
}
</style>
</head>
<body>
<div><p style="width:140px">
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
</p></div>
<p>Overflow-x 是否对内容的左/右边缘进行裁剪。</p>
<p>Overflow-y 是否对内容的上/下边缘进行裁剪。</p>
</body>
</html>
レンダリング:


# #

以上がoverflow-y 属性の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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