Widely available YES。主要ブラウザで対応済み。hidden より正確なクリッピングが必要な場合に推奨。

overflow: clip

overflow: hidden ははみ出しを隠すが、内部的にはスクロールコンテナを生成するため、JavaScript の scrollTo() などでスクロールが可能になってしまう。overflow: clip はスクロールコンテナを生成せず、純粋にコンテンツを切り取る。また、一方向のみのクリッピング（overflow-x: clip; overflow-y: visible）も可能で、hidden では不可能だった制御ができる。

オーバーフロー

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.overflow-x.clip
90
90
81
16
90
16
CSS プロパティ
clip
90
90
81
16
90
16
clip
90
90
81
16
90
16
CSS タイプ
clip
90
90
81
16
90
16
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (81)
対応条件
  • 以前は別名で対応していました: -moz-hidden-unscrollable (3.5)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (81)
対応条件
  • 以前は別名で対応していました: -moz-hidden-unscrollable (3.5)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (81)
対応条件
  • 以前は別名で対応していました: -moz-hidden-unscrollable (1.5)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (81)
対応条件
  • 以前は別名で対応していました: -moz-hidden-unscrollable (1.5)

基本構文

CSS 
/* Pure clipping */
.clipped {
  overflow: clip;
}

/* Clipping in one direction only */
.horizontal-clip {
  overflow-x: clip;
  overflow-y: visible;
}

ライブデモ

overflow: clip

overflow: clip Overflow: clip demo.

プレビュー全画面表示

overflow-x: clip only

overflow: clip overflow-x: clip only demo.

プレビュー全画面表示

Hidden and. Comparison

overflow: clip Hidden and. comparison demo.

プレビュー全画面表示

実務での使いどころ

  • 一方向のみのクリッピング

    水平方向ははみ出しを切り取りつつ、垂直方向はドロップダウンメニューなどをはみ出させたい場面で使える。

  • 意図しないスクロールの防止

    hidden と異なりスクロールコンテナが生成されないため、JavaScript からのスクロールも防止される。

注意点

  • clip はスクロールを一切許容しないため、コンテンツが切り取られて読めなくなるリスクがある。テキストコンテンツには慎重に適用する。
  • position: sticky は overflow: clip のコンテナ内では機能しない。

アクセシビリティ

  • 切り取られたコンテンツは視覚的にもスクロールでもアクセスできなくなるため、重要なコンテンツに対して使用しないよう注意する。

参考リンク