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

CSSのoverflow-x属性の使い方

青灯夜游オリジナル: 2019-05-29 14:22:502837ブラウズ

overflow-x 属性は、要素がコンテンツ領域からオーバーフローした場合に、コンテンツの左端/右端をトリミングするかどうかを指定するために使用されます。 overflow-x 属性は、IE8 以前のブラウザでは正しく機能しません。

css overflow-x 属性を使用するにはどうすればよいですか?

overflow-x 属性は、コンテンツが要素コンテンツ領域からオーバーフローした場合にコンテンツの左端/右端をトリミングするかどうかを指定します。

構文:

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

属性値:

● 表示可能: コンテンツはトリミングされず、外側のコンテンツボックス。

##●非表示: 切り取られたコンテンツ - スクロール機構は提供されません。

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

##●自動: ボックスがオーバーフローする場合は、スクロール機構を提供する必要があります。

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

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

注:

overflow-y 属性を使用して、上端と下端をトリミングするかどうかを決定します。 overflow-x 属性は、IE8 以前のブラウザでは正しく機能しません。

css overflow-x 属性の例

<!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>

レンダリング:

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

css auto display overflow

声明：

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

前の記事：CSSのbox-flex属性の使い方次の記事：CSSのbox-flex属性の使い方

続きを見る