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

overflow: clip

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

オーバーフロー

概要

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

対応ブラウザ

デスクトップ

Chrome 90+
Edge 90+
Safari 16+
Firefox 81+

モバイル

Chrome Android 90+
Safari iOS 16+
Firefox Android 81+

基本構文

CSS 
/* 純粋なクリッピング */
.clipped {
  overflow: clip;
}

/* 一方向のみクリップ */
.horizontal-clip {
  overflow-x: clip;
  overflow-y: visible;
}

実務での使いどころ

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

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

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

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

注意点

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

アクセシビリティ

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

参考リンク