overflow-x

overflow-xCSS のプロパティで、ブロックレベル要素の内容が左右の境界からあふれた場合、どのように表示するのかを設定します。表示しないか、スクロールバーを表示するか、あふれさせるかを設定できます。

overflow-yhidden, scroll, auto のいずれかであり、このプロパティが visible (既定値) である場合は、暗黙的に auto と計算されます。

構文

/* キーワード値 */
overflow-x: visible;
overflow-x: hidden;
overflow-x: clip;
overflow-x: scroll;
overflow-x: auto;

/* グローバル値 */
overflow-x: inherit;
overflow-x: initial;
overflow-x: unset;

overflow-x プロパティは、以下の値の一覧のうち一つのキーワードで指定します。

visible
内容は切り取られず、パディングボックスの左右の辺よりも外側に表示される可能性があります。
hidden
水平方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。スクロールバーは表示されません。
clip
hidden のように、内容が要素のパディングボックスで切り取られます。 cliphidden の違いは、 clip キーワードはプログラムによるスクロールも含め、すべてのスクロールを禁止することです。ボックスはスクロールコンテナーにならず、新しい整形コンテキストを開始しません。新しい整形コンテキストを始めるのであれば、 display: flow-root を使用して実現することができます。
scroll
水平方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。ブラウザーは内容が実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これは内容が変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターははみ出す内容を印刷するかもしれません。
auto
ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は visible と同じように表示されますが、新しいブロック整形文脈を生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。

形式文法

visible | hidden | clip | scroll | auto

HTML

<ul>
  <li><code>overflow-x:hidden</code> — ボックスの外側のテキストを隠す
    <div id="div1">
      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
    </div>
  </li>

  <li><code>overflow-x:scroll</code> — 常にスクロールバーを表示
    <div id="div2">
      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
    </div>
  </li>

  <li><code>overflow-x:visible</code> — 必要に応じてテキストをボックスの外に表示
    <div id="div3">
      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
    </div>
  </li>

  <li><code>overflow-x:auto</code> — 多くのブラウザーでは <code>scroll</code> と同じ
    <div id="div4">
      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
    </div>
  </li>
</ul>

CSS

#div1, #div2, #div3, #div4 {
  border: 1px solid black;
  width:  250px;
  margin-bottom: 12px;
}

#div1 { overflow-x: hidden;}
#div2 { overflow-x: scroll;}
#div3 { overflow-x: visible;}
#div4 { overflow-x: auto;}

結果

仕様書

仕様書 状態 備考
CSS Overflow Module Level 3
overflow-x の定義
草案
初期値visible
適用対象ブロックコンテナー, フレックスコンテナー, グリッドコンテナー
継承なし
計算値as specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clip
アニメーションの種類個別

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
overflow-xChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 5
完全対応 5
完全対応 8
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 完全対応 9.5Safari 完全対応 3WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 14Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
clip value
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報