ホームページ > 記事 > ウェブフロントエンド > CSSでオーバーフロープロパティを使用する方法
CSSでオーバーフロープロパティを使用する方法
- 不言オリジナル
- 2018-12-10 14:19:173844ブラウズ
CSS の CSSでオーバーフロープロパティを使用する方法 属性は頻繁に使用される属性です。次の記事では、CSS での CSSでオーバーフロープロパティを使用する方法 属性の具体的な使用方法を説明します。
まず、CSSでオーバーフロープロパティを使用する方法 属性の値を見てみましょう。
CSSでオーバーフロープロパティを使用する方法 プロパティは、コンテンツが要素のボックスからオーバーフローした場合に何が起こるかを指定します。
CSSでオーバーフロープロパティを使用する方法 には次の 4 つの属性値があります。
visible: 初期値。コンテンツはトリミングされず、要素ボックスの外側に表示されます。
scroll: コンテンツはトリミングされますが、ブラウザーには残りのコンテンツを表示するためのスクロール バーが表示されます。
hidden: コンテンツはトリミングされ、残りのコンテンツは非表示になります。
auto: コンテンツがトリミングされると、ブラウザーには残りのコンテンツを表示するためのスクロール バーが表示されます。
オーバーフロー属性の 4 つの値について詳しく説明します
具体的な例を見てみましょう
コードは次のとおりです
HTMLコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS CSSでオーバーフロープロパティを使用する方法</title>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<div class="hid">
<p>
The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.
</p>
</div>
<br>
<div class="scr">
<p>
The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.
</p>
</div>
<br>
<div class="vis">
<p>
The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.
</p>
</div>
</body>
</html>CSSコード
/*hidden*/
div.hid{
width: 200px;
height: 100px;
CSSでオーバーフロープロパティを使用する方法: hidden;
background-color: #FF9999;
}
/*scroll*/
div.scr{
width: 200px;
height: 100px;
CSSでオーバーフロープロパティを使用する方法: scroll;
background-color: #99FF99;
}
/*visible*/
div.vis{
width: 200px;
height: 100px;
CSSでオーバーフロープロパティを使用する方法: visible;
background-color: #9999FF;
}ブラウザ上に以下の結果を表示
オーバーフロー属性値を非表示にした場合 # 効果は以下の通りです。
非表示の場合、残りの部分は表示されず、残りのコンテンツはスクロールできません。
オーバーフローの属性値がscrollの場合、効果は次のようになります。
div.scr{
width: 200px;
height: 100px;
white-space:nowrap;
CSSでオーバーフロープロパティを使用する方法: scroll;
background-color: #99FF99;
}効果は次のとおりです
##さらに、オーバーフローも使用可能 -x および CSSでオーバーフロープロパティを使用する方法-y 属性は、垂直スクロール バーと水平スクロール バーの表示に関するより詳細な設定を提供します。
目に見える状況は下にあり、箱から溢れて表示されます。紫色の部分がdivボックスです。デフォルトでは、テキストは div の水平幅で折り返されて垂直方向に表示されます。
これもscroll属性値と同じで、CSSのwhite-space:nowrapを設定することで横スクロールも可能です。
また、ボックスの高さが設定されていない場合は、ボックスの高さが自動的に変更されます。
div.vis{
width: 200px;
/* height: 100px; */
CSSでオーバーフロープロパティを使用する方法: visible;
background-color: #9999FF;
}効果は次のとおりです
最後に、オーバーフロー属性値が auto の場合の
##HTML コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS CSSでオーバーフロープロパティを使用する方法</title>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<div class="aut">
<p>
The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Everyone realizes why a new common language would be desirable: one could refuse to pay expensive translators.
</p>
</div>
</body>
</html>CSS コード
div.aut{
width: 200px;
height: 100px;
CSSでオーバーフロープロパティを使用する方法: auto;
background-color: red;
}ブラウザ上で実行すると、スクロールと同様の効果が得られます
以上がCSSでオーバーフロープロパティを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。