CSSでオーバーフロープロパティを使用する方法-CSSチュートリアル-php.cn

CSSでオーバーフロープロパティを使用する方法

不言

リリース： 2018-12-10 14:19:17

オリジナル

3986 人が閲覧しました

CSS の 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;
}

ログイン後にコピー

ブラウザ上に以下の結果を表示

オーバーフロー属性値を非表示にした場合 # 効果は以下の通りです。

CSSでオーバーフロープロパティを使用する方法

非表示の場合、残りの部分は表示されず、残りのコンテンツはスクロールできません。

オーバーフローの属性値がscrollの場合、効果は次のようになります。

CSSでオーバーフロープロパティを使用する方法

##スクロールの場合、表示されていない内容もスクロールできます。デフォルトでは、テキストは水平方向に折り返され、スクロールバーが垂直方向に表示されます。

css:nowrap で空白を設定します (自動行変更なしを意味します)。水平方向にスクロールすることもできます。

CSS コード

div.scr{
  width: 200px;
  height: 100px;
  white-space:nowrap;
  CSSでオーバーフロープロパティを使用する方法: scroll;
  background-color: #99FF99;
}

ログイン後にコピー

効果は次のとおりです

CSSでオーバーフロープロパティを使用する方法

##さらに、オーバーフローも使用可能 -x および CSSでオーバーフロープロパティを使用する方法-y 属性は、垂直スクロールバーと水平スクロールバーの表示に関するより詳細な設定を提供します。

CSSでオーバーフロープロパティを使用する方法の属性値が表示されている場合の効果は次のとおりです

CSSでオーバーフロープロパティを使用する方法

目に見える状況は下にあり、箱から溢れて表示されます。紫色の部分がdivボックスです。デフォルトでは、テキストは div の水平幅で折り返されて垂直方向に表示されます。

これもscroll属性値と同じで、CSSのwhite-space:nowrapを設定することで横スクロールも可能です。

また、ボックスの高さが設定されていない場合は、ボックスの高さが自動的に変更されます。

div.vis{
  width: 200px;
  /* height: 100px;  */
  CSSでオーバーフロープロパティを使用する方法: visible;
  background-color: #9999FF;
}

ログイン後にコピー

効果は次のとおりです

CSSでオーバーフロープロパティを使用する方法最後に、オーバーフロー属性値が 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 サイトの他の関連記事を参照してください。