概要

overflow-inlineプロパティは、CSSで要素のインライン方向のオーバーフローを制御するためのプロパティです。このプロパティを使用することで、テキストやコンテンツが要素のインライン方向（横方向）に収まりきらない場合の表示方法を調整できます。文書の書字方向に応じて動作するため、overflow-xよりも柔軟にオーバーフローを管理できます。

構文

overflow-inline: visible | hidden | scroll | auto;

パラメータ

  • visible
    コンテンツが要素の範囲を超えた場合でも隠さずに表示します。デフォルトの動作です。
  • hidden
    コンテンツが要素の範囲を超えた部分を隠します。スクロールバーは表示されません。
  • scroll
    コンテンツが要素の範囲を超えた場合、スクロールバーを常に表示します。
  • auto
    コンテンツが要素の範囲を超えた場合にスクロールバーを表示しますが、必要ない場合は表示されません。

戻り値

overflow-inlineは、要素のインライン方向のオーバーフロー動作を指定された値に従って制御します。これにより、横方向のコンテンツの表示方法が決定され、スクロールやクリッピングの動作が調整されます。

説明

overflow-inlineは、文書の書字方向に従ってオーバーフローを制御する点が特徴的です。例えば、左から右（LTR）の文書ではoverflow-xと同じ動作をしますが、右から左（RTL）の文書では動作が逆になります。これにより、どの方向の文書でも適切なオーバーフロー制御が可能になります。

主な特徴

  • インライン方向（横方向）のオーバーフローを制御し、スクロールやクリッピングの動作を指定できます。
  • 文書の書字方向（LTR、RTL）に応じて柔軟に動作します。
  • overflow-blockと組み合わせることで、ブロック方向とインライン方向のオーバーフローを個別に制御可能です。

使用例

基本的な使用例

以下の例では、overflow-inlineを使ってインライン方向のオーバーフローを隠しています。

.container {
  width: 200px;
  height: 100px;
  overflow-inline: hidden; /* インライン方向のオーバーフローを隠す */
  background-color: lightblue;
}
.content {
  width: 300px;
  height: 80px;
  background-color: coral;
}

この設定により、コンテンツがインライン方向に要素の範囲を超えても表示されません。

スクロールバーを表示する例

overflow-inlineをscrollに設定することで、コンテンツが超えた場合にスクロールバーを常に表示できます。

.container {
  width: 250px;
  height: 100px;
  overflow-inline: scroll; /* インライン方向のオーバーフローにスクロールバーを表示 */
  background-color: lightgreen;
}
.content {
  width: 350px;
  height: 80px;
  background-color: salmon;
}

この例では、コンテンツが超えた分だけスクロールバーが表示され、ユーザーがスクロールして見ることができます。

autoを使用して必要に応じてスクロールバーを表示する例

autoを使えば、必要に応じてのみスクロールバーを表示できます。

.container {
  width: 300px;
  height: 100px;
  overflow-inline: auto; /* 必要な場合のみスクロールバーを表示 */
  background-color: lightyellow;
}
.content {
  width: 400px;
  height: 80px;
  background-color: lightcoral;
}

この設定では、コンテンツがはみ出した場合のみスクロールバーが表示され、そうでない場合は表示されません。

注意点

  • overflow-inlineはoverflow-xと似た動作をしますが、書字方向に依存して動作するため、異なる書字方向を扱う場合により柔軟です。
  • サポート状況がブラウザによって異なる可能性がありますので、使用前に対応状況を確認してください。
  • overflow-inlineは他のオーバーフロープロパティと組み合わせて使用することで、より細かな表示制御が可能になります。

まとめ

overflow-inlineプロパティは、要素のインライン方向のオーバーフローを柔軟に制御するための便利なプロパティです。特に異なる書字方向に対応するデザインや、インラインとブロック方向のオーバーフローを個別に制御したい場合に役立ちます。他のオーバーフロープロパティと組み合わせて、より洗練されたレイアウトを実現してください。

参照:

overflow-inline - MDN Web Docs