CSSオーバーフローモジュール レベル3

1. はじめに

CSS Level 1 [CSS1]では、指定されたサイズの要素内に収まりきらないコンテンツを配置することは、一般的に著者のミスとされていました。 その結果、コンテンツが要素の境界を超えて拡張され、他の要素と重なってしまう可能性がありました。

CSS Level 2 [CSS2]では、overflowプロパティが導入され、 オーバーフローをスクロールで処理できるようになり、もはや著者のミスではなくなりました。 また、オーバーフローをクリッピングで処理することも指定でき、 著者がコンテンツを表示しない意図の場合に適しています。

本仕様では、長らく事実上使われてきたoverflow-xおよびoverflow-y プロパティを導入し、 clip値を追加し、 オーバーフロー処理をより詳細に定義しています。

[何か max-lines に関する記述]

注: 本仕様は、text-overflowプロパティの定義も再掲しています。 これは[CSS-UI-3]で以前に定義されたもので、 追加や修正はなく、text-overflowとblock-ellipsisを併せて提示するためです。

1.1. 値の定義

本仕様は、CSS2のプロパティ定義規則および[CSS-VALUES-3]の値定義構文に従っています。 本仕様で定義されていない値型はCSS Values & Units [CSS-VALUES-3]で定義されています。 他のCSSモジュールとの組み合わせにより、これらの値型の定義が拡張される場合があります。

各プロパティ定義に記載された値に加え、 本仕様で定義されるすべてのプロパティは、CSS全体キーワードも値として受け付けます。 可読性のため、明示的に繰り返していません。

1.2. モジュールの相互作用

本モジュールは、[CSS2] の11.1 Overflow and clippingおよび [CSS-UI-3]の5.2. Overflow Ellipsis: the text-overflow propertyで定義された機能を置き換え（上書き）および拡張します。

2. オーバーフローの概念と用語

CSSでは、overflowという用語は、 ボックスのいずれかの端（content edge、padding edge、border edge、margin edge）を超えて コンテンツが拡張することを指します。 この用語は、オーバーフローを引き起こす要素や機能、 それらが占める非矩形領域、 または一般的にはその領域を囲む最小の矩形として解釈される場合があります。 ボックスのオーバーフローは、そのボックス自身のレイアウトとスタイリング、 およびcontaining block chainにそのボックスが含まれるすべての子孫によって計算されます。

多くの場合、overflowは、 ボックス自身の境界とプロパティ、 そして各子のoverflowから計算できます。 ただし、常にそうとは限りません。例えば、 子要素の一部にtransform-style: preserve-3d [CSS3-TRANSFORMS]が使われている場合、 その子孫でtransform-style: preserve-3dが使われているものも調べる必要があります。

オーバーフローには2種類あり、UAによって異なる目的で使用されます：

• インクオーバーフロー
• スクロール可能なオーバーフロー

2.1. インクオーバーフロー

インクオーバーフローとは、 ボックスおよびその内容のうち、 ボックスのボーダーボックスの外側に視覚効果を生み出す部分を指します。 インクオーバーフローは、レイアウトに影響しない、または スクロール可能なオーバーフロー領域を拡張しない 描画効果のオーバーフローです。 例えば、ボックスシャドウ、 ボーダー画像、 テキスト装飾、 はみ出したグリフ（負のサイドベアリングや、emボックスの外側まで伸びるアセンダー／ディセンダー）、 アウトライン などが該当します。

CSSの一部の効果（例えば、text-shadow [CSS-TEXT-3]やbox-shadow [CSS-BACKGROUNDS-3]のぼかしなど）は理論上無限であり、 どの範囲まで視覚的に影響するか定義されていないため、インクオーバーフローの範囲は未定義です。

インクオーバーフロー領域は、 ボックスおよびその内容のインクオーバーフローが占める非矩形領域です。 インクオーバーフロー矩形は、 ボックスの軸に揃った最小の矩形で、インクオーバーフロー領域を含みます。 インクオーバーフロー矩形はボックスの座標系では矩形ですが、 変形（transform）によって他の座標系では非矩形になる場合があります。[CSS3-TRANSFORMS]

replacedコンテンツのオーバーフローは常にインクオーバーフロー（スクロール可能なオーバーフローではない）です。

2.2. スクロール可能なオーバーフロー

スクロール可能なオーバーフローとは、ボックスのパディング端の外側に拡張され、スクロール機構の提供が必要な対象の集合です。

スクロール可能なオーバーフロー領域は、スクロール可能なオーバーフローが占める非矩形領域であり、スクロール可能なオーバーフロー矩形は、その軸がボックスの軸に揃えられ、スクロール可能なオーバーフロー領域を包含する最小の矩形です。

スクロール可能なオーバーフロー領域は、次の集合の合成です：

• スクロールコンテナ自身のpadding box。
• スクロールコンテナが直接含むすべてのラインボックス。
• そのボックスがコンテインブロックであるすべてのボックスのボーダーボックスで、かつそのボーダーボックスが到達不能スクロール可能オーバーフロー領域内に完全には位置していないもの。各ボックスを、その3Dレンダリングコンテキストを確立する要素の平面に投影することで変形を考慮する。 [CSS3-TRANSFORMS]

  このトランスフォームの扱いの説明は十分に正確か？

  面積ゼロのボーダーボックスは、スクロール可能なオーバーフロー領域に影響しません。

• そのボックスがコンテインブロックを確立するグリッドアイテムおよびフレックスアイテムボックスのマージン領域。

  UAはさらに、そのボックスがコンテインブロックを確立する他のボックスのマージン領域も含めることができますが、そのようなマージン領域が含まれる条件はこのレベルでは未定義です。 これにはさらなるテストと調査が必要であり、このドラフトでは延期されます。

• 上記すべてのボックス（面積ゼロのボックスも含む、および前述のように変形を考慮）のスクロール可能なオーバーフロー領域。ただし、それ自体がoverflow: visible（すなわち自身でオーバーフローを捕捉しない）であり、かつスクロール可能なオーバーフローがすでにクリップされていないこと（例：clipプロパティやcontainプロパティによる）。

  注: mask-*プロパティは[CSS-MASKING-1]、スクロール可能なオーバーフロー領域には影響しません。

  何がスクロール可能なオーバーフローをクリップするべきか/しないべきか評価が必要です。[Issue #8607]

• スクロール可能なオーバーフロー矩形に追加されるパディング。これは、place-content: startおよびplace-content: endのアライメント要件を満たすスクロール位置を可能にするために必要に応じて追加されます。

  注: このパディングは、スクロール可能なオーバーフロー矩形内でボックス自身のパディングとして機能し、コンテンツが端までスクロールされた際、ボックスの流れ内（または浮動）コンテンツの端とボックスのボーダー端との間にパディングが残るようにします。通常はボックス自身のパディングと同じサイズになりますが、絶対位置要素や子孫の可視オーバーフローがすでにスクロール可能なオーバーフロー矩形のサイズを「content edge」より外側に広げている場合など、例外もあります。 スクロールコンテナのコンテンツの概念的な「content edge」外に広げている場合など、例外もあります。

  

さらに、Web互換性の制約（著者がレガシーバグを利用して視覚的な閲覧者からコンテンツを密かに隠すが、検索エンジンや音声出力からは隠さないため）により、UAは到達不能スクロール可能オーバーフロー領域内のコンテンツをクリップしなければなりません。

注: コンテンツ分配プロパティは到達不能スクロール可能オーバーフロー領域を変更し、スクロールコンテナのアライメント対象がアライメント後に到達可能になるようにできます。 [CSS-ALIGN-3]

注: スクロール可能なオーバーフロー矩形はボックス自身の座標系では常に矩形ですが、トランスフォームにより他の座標系では非矩形になることがあります。[CSS3-TRANSFORMS]そのため、実際には必要ないにもかかわらずスクロールバーが表示されることがあります。

2.3. スクロールオーバーフロー

ボックスのオーバーフローは、可視またはクリップされている場合があります。 CSSでは、ボックスをスクロールコンテナ として、スクロール可能なオーバーフロー領域のクリップされた部分をスクロールして表示できるようにすることもできます。 スクロールコンテナの視覚的な「ビューポート」 （スクロール可能なオーバーフロー領域を閲覧するための部分）は パディングボックスと一致し、スクロールポートと呼ばれます。 ボックスの最も近いスクロールポートは、 その最も近いスクロールコンテナ祖先のスクロールポートです。

スクロール操作は、ユーザーによって（例えば、スクロールバーの操作、タッチスクリーンのスワイプ、キーボード制御の使用など）や スクリプトによって （例：scrollIntoView() や focus() API）開始されることがあります。 スクロール操作が行われる前にスクロール可能なオーバーフロー矩形がスクロールポート内にある初期位置は 初期スクロール位置です。 初期スクロール位置は、通常スクロールコンテナの書字モードに依存し、特に指定がなければ スクロール原点位置と一致します。 例えば、scroll-initial-targetプロパティを使って 初期スクロール位置を変更できます。 [CSS-SCROLL-SNAP-2]

スクロール位置は、 スクロール可能なオーバーフロー矩形が スクロールポート内で特定の位置合わせになった状態を指します。 これはスクロールオフセットに関連付けられており、 スクロール原点からの距離です。

スクロール原点は、 スクロール可能なオーバーフロー矩形の基準座標であり、 ここからスクロール可能なオーバーフロー矩形が広がります。 特に指定がなければ、 block-startおよびinline-startの角がスクロール可能なオーバーフロー矩形の原点です。 （例えば、フレックスコンテナの場合は main-startと cross-startの角です。） 特に調整されていなければ （例：コンテンツアライメントによる [css-align-3]）、 原点より先の領域は、どちらの軸でも 到達不能スクロール可能オーバーフロー領域とみなされます。 ここに描画されたコンテンツは読者がアクセスできません。 § 2.2 スクロール可能なオーバーフローも参照してください。 スクロールコンテナが スクロール原点にスクロールされているとは、 スクロール原点が対応するスクロールポートの角と一致している状態です。 このスクロール位置は スクロール原点位置と呼ばれ、通常は 初期スクロール位置と一致しますが、必ずしもそうとは限りません。

ベースラインアライメントなどが 初期スクロール位置またはスクロール原点位置に依存するかどうか確認してください。

スクロールオフセットの座標系は定義されていません。 下方向／右方向、ブロック軸／インライン軸の終端方向、またはスクロール原点から離れる方向で増加するかも未定義です。 各APIごとに座標モデルを定義するべきでしょうか？

ページ全体をスクロールするルートビューポートはキャンバスをスクロールし、 主書字モードを用いて スクロール原点および初期スクロール位置を決定します。

注: スクロールコンテナ（またはその祖先）のいずれかがグラフィカルなトランスフォームの対象となる場合、 UAはユーザー入力をスクロール操作にマッピングする際にこのトランスフォームを考慮する必要があります。 例えば、タッチスクリーンでユーザーがコンテンツを直接ドラッグしてスクロールする場合、 スクロールの方向がジェスチャーに一致するようにトランスフォームを考慮することが期待されます。 一方で、Page Downキーや1Dスクロールホイールなど他の入力は、トランスフォームを無視して解釈する方が自然な場合もあります。 各スクロール機構に適切な挙動を選択するのはUAの責任です。

3. スクロールおよびクリッピングのオーバーフロー

3.1. オーバーフローの管理：overflow-x、overflow-y、およびoverflowプロパティ

これらのプロパティは、ボックスのオーバーフローがクリップされるかどうか、 そしてクリップされる場合に スクロールコンテナとなるかどうかを指定します。

overflow-xプロパティは 水平方向（つまりボックスの左右）へのオーバーフローの扱いを指定し、 overflow-yプロパティは 垂直方向（つまりボックスの上下）へのオーバーフローの扱いを指定します。

overflow-blockおよびoverflow-inlineプロパティも同様に、 オーバーフローの扱いを それぞれブロック軸およびインライン軸で指定します。

これら4つのプロパティは、 論理プロパティグループを overflowのショートハンドとともに構成し、 CSS Logical Properties 1 § 4 流れ相対ボックスモデルプロパティで定義されたように相互作用します。

overflowプロパティは、 ショートハンドプロパティであり、 overflow-xおよびoverflow-yの値をその順で設定します。 2番目の値が省略された場合は、1番目の値がコピーされます。

値の意味は次の通りです：

visible

オーバーフローに特別な処理は行われません。つまり、ボックスの内容がその位置にある場合、ボックス外に描画されます。 ボックスはスクロールコンテナではありません。

hidden

この値は、ボックスの内容がパディングボックスにクリップされ、 UAがクリッピング領域外の内容を表示するためのスクロールUIを提供してはならず、 ユーザーによる直接操作（タッチスクリーンでのドラッグやマウスのスクロールホイールなど）によるスクロールも許可されません。 ただし、内容はプログラムによってスクロール可能でなければならず、 例えば[CSSOM-VIEW]で定義された仕組みの利用などです。 したがってボックスはスクロールコンテナとなります。

clip

この値は、ボックスの内容がoverflow clip edgeにクリップされ、 UAがクリッピング領域外の内容を表示するスクロールUIを提供してはならないことを示します。 さらに、overflow: hiddenがプログラムによるスクロールを許容するのに対し、 overflow: clipは、すべての手段によるスクロールを完全に禁止します。 したがってボックスはスクロールコンテナではありません。

hiddenとは異なり、この値は要素に新しいフォーマットコンテキストを確立しません。

注: ボックスにもフォーマットコンテキストを確立させたい場合は、 display: flow-rootとoverflow: clipを組み合わせて使ってください。

scroll

この値は、内容がパディングボックスにクリップされますが、 スクロールして表示することができます（したがってボックスはスクロールコンテナです）。 さらに、ユーザーエージェントが画面上に見えるスクロール機構（スクロールバーやパナーなど）を使用する場合、 内容がクリップされているかどうかに関わらず、その機構は表示されるべきです。 動的な環境でスクロールバーが表示されたり消えたりする問題を回避できます。 ターゲット媒体がprintの場合、オーバーフローした内容が印刷される場合がありますが、 どこに印刷されるかは定義されていません。

auto

ボックスがスクロール可能なオーバーフローを持つ場合はscrollと同じです。 そうでない場合はhiddenと同じです。 したがって、ユーザーエージェントが画面上に見えるスクロール機構（スクロールバーやパナーなど）を使用する場合、 オーバーフローがある場合のみ表示されます。

scroll、 auto、 hidden の値は、 overflowの スクロール可能値 として知られています。 visibleおよび clip の値は、 非スクロール可能値 として知られています。

visible/clipのoverflowの値は、 auto/hidden（それぞれ）に算出されます。 これは、overflow-xまたはoverflow-yのいずれかが visibleまたはclip以外の場合です。 置換要素では、 算出値がhiddenの場合、 使用値はclipにさらに解決されます。

overflowプロパティの算出値が ブロックボックスで、 visibleでもclipでも、その組み合わせでもない場合、 その内容に対して独立したフォーマットコンテキストを確立します。

ユーザーエージェントは、 overlayキーワードも レガシー値のエイリアスとして autoをサポートしなければなりません。

3.1.1. visibilityとoverflowの相互作用

visibilityプロパティの算出値がhidden （またはhiddenと同じ効果を持つcollapse）であり、 overflowがscrollまたはautoの場合、

• ユーザーエージェントは、スクロール機構を表示してはなりません。 visibility: hiddenがなかった場合に 通常表示されるスクロール機構がレイアウトに影響する範囲では、 その影響は維持されますが、描画はされません。

• overflow: hiddenの場合と同様に、 ユーザー操作による直接的なスクロールは無効化されますが、 プログラムによるスクロールは有効です。

• インタラクティブな直接スクロールができないことは、 ユーザーがvisibility: hiddenの スクロールコンテナの子孫 （自身はvisibility: visibleであっても）に マウスのスクロールホイールなどで操作した場合でも同様に適用されます。

3.1.2. border-radiusとoverflowの相互作用

CSS Backgrounds 3 § 4.3 コーナークリッピングで述べられているように、 overflowによって確立されるクリッピング領域は角を丸めることができます：

• overflow-xとoverflow-yが hidden、scroll、またはautoに算出された場合、 クリッピング領域はborder-radiusに基づき、 padding edgeに調整されて丸められます。 詳細はCSS Backgrounds 3 § 4.2 コーナーの形状を参照してください。

• overflow-xとoverflow-yが両方ともclipに算出された場合、 クリッピング領域は§ 3.2 クリッピング境界の拡張: overflow-clip-marginプロパティで説明されているように丸められます。

• ただし、overflow-xまたはoverflow-yのいずれかがclipに算出され、 もう一方がvisibleに算出された場合、クリッピング領域は丸められません。

3.1.3. 印刷およびその他の静的メディアにおけるオーバーフロー

静的メディア（印刷など）ではスクロールができないため、 著者はそのようなメディアでもコンテンツがアクセス可能となるよう注意すべきです。 例えば、@media print, (update: none) { … }を使って すべての関連コンテンツが同時に見えるようレイアウトを調整してください。

スクロールコンテナが 非インタラクティブメディアで overflow値としてautoまたはscroll （ただしhiddenは除く）を持つ場合、 UAはスクロール可能なオーバーフローの表示を行うことができます。 例えば、スクロールバーや省略記号を表示するなどです。

注: すべてのページメディアが 非インタラクティブとは限りません。 例えば、電子書籍リーダーはコンテンツをページ分割しますが、インタラクティブです。

3.2. クリッピング境界の拡張: overflow-clip-marginプロパティ

このプロパティは、ボックスのoverflow clip edge、すなわち ボックスの境界から内容がどれだけ外側まで描画され、 overflow: clip（上記）などの クリッピング効果によって overflow clip edgeでクリップされる前に 許可される距離を定義します。

値の定義は以下の通りです：

<visual-box>

指定されたオフセットがゼロの場合、overflow clip edgeの原点として 使われるボックス端を指定します。

省略された場合は padding-boxがデフォルトです。

<length [0,∞]>

指定されたオフセットは overflow clip edgeが 指定されたボックス端からどれだけ拡張されるかを決定します。 負の値は無効です。 省略時はゼロがデフォルトです。

overflow clip edgeの角の形状は、 outer box-shadowと同じ累積オフセットの spread radiusでボックスのborder edgeから拡張された場合とまったく同じ方法で形作られます。 CSS Backgrounds 3 § 4.2 コーナーの形状および CSS Backgrounds 3 § 6.1.1 シャドウ形状、拡張、ノックアウトを参照し、 特にborder edgeを超えるアウトセットの式に注意してください。

注: このプロパティは、 overflow: hiddenやoverflow: scrollを持つボックスには効果がありません。 それらにはoverflow clip edgeの使用が定義されていません。

3.3. オーバーフロービューポートの伝播

UAは、ルート要素に設定されたoverflow-*値を、 ルート要素のdisplay 値がnoneでない場合、 ビューポートに適用しなければなりません。 しかし、 ルート要素が[HTML] html 要素（HTMLのXML構文も含む）で、 そのoverflow値が（両軸とも）visibleであり、 かつその要素が子として body 要素を持ち、そのdisplay値もnoneでない場合、 UAは代わりに、最初のそのような子要素のoverflow-*値をビューポートに適用しなければなりません。 値が伝播される要素は、使用されるoverflow値がvisibleでなければなりません。

注: HTMLの html または body 要素にcontainmentを使用すると、 このHTML body 要素の特殊な扱いは無効化されます。 詳細はCSS Containment 1 § 2 強いコンテインメント: containプロパティを参照してください。

注: ルート要素のoverflow: hiddenは、 初期包含ブロックの外側すべてをクリップしない場合があります。 これはICBがビューポートより小さい場合（モバイルなど）に発生します。

visibleがビューポートに適用される場合、 autoとして解釈しなければなりません。 clipがビューポートに適用される場合は、 hiddenとして解釈しなければなりません。

3.4. スムーズスクロール：scroll-behaviorプロパティ

scroll-behaviorプロパティは スクロールコンテナにおける スクロール操作がナビゲーションや スクロールAPI[CSSOM-VIEW]、 またはユーザーによる操作でないスクロールスナップ操作[CSS-SCROLL-SNAP-1] で発生する場合の挙動を指定します。 その他のスクロール（ユーザーによるものなど）はこのプロパティの影響を受けません。 このプロパティがルート要素に指定された場合、ビューポートに適用されます。

注: HTMLの body 要素のscroll-behaviorプロパティは ビューポートに伝播しません。

auto

スクロールコンテナは 即時にスクロールされます。

smooth

スクロールコンテナは スムーズに、 UA定義のタイミング関数とUA定義の期間を用いて スクロールされます。 UAはプラットフォームの慣習に従うべきです。

UAはこのプロパティを無視してもかまいません。

4. スクロールバーとレイアウト

4.1. スクロールバーによるサイズへの寄与

要素のボックス端にスクロールバーのためのスペースを確保する場合、確保されたスペースは内側のボーダー端と外側のパディング端の間に挿入されます。 background positioning areaやbackground painting areaに関しては、 この確保されたスペースはpadding boxの一部とみなされます。

<style>
  article {
    background: top right no-repeat url(circle.png);
    position: relative;
    overflow: auto; }
  aside { position: absolute; top: 0; right: 0; }
</style>
<article>
  <aside>×</aside>
</article>

ボックスが内在的サイズの場合、この確保されたスペースは内容のサイズに加算されます。 それ以外の場合は、content areaに割り当てられたスペースから差し引かれます。 スクロールバーの有無がサイズに影響する可能性がある場合、 UAはまずスクロールバーが不要であると仮定してサイズ計算を開始し、 必要が判明した場合に再計算しなければなりません。

...
    article { overflow: auto; max-height: 5em;  width: max-content; }
    section { margin: 2em; line-height: 1 }
...
<article>
  <section>
    This section has big margins.
  </section>
</article>

4.2. スクロールバーのためのスペース確保: scrollbar-gutter プロパティ

内側のボーダー端と外側のパディング端の間に UAがスクロールバー表示のために確保するスペースは scrollbar gutter （スクロールバーグラター）と呼ばれます。

scrollbar-gutterプロパティは、 scrollbar gutter（スクロールバーグラター）の有無を 著者が制御できるようにし、 overflowプロパティによるスクロールバーの制御とは別に設定できます。

このプロパティは、ボックスのscrollbar gutterを インライン開始端またはインライン終了端に 配置することに影響します。

scrollbar gutter（スクロールバーグラター）が ブロック開始端やブロック終了端に 配置されるかどうかはこのレベルでは制御できません。 その決定方法は、scrollbar gutterを インライン開始端やインライン終了端に 配置する場合と同じです（scrollbar-gutterがautoの場合）。

デフォルトでコンテンツボックス上に配置され、 scrollbar gutterが 作成されないスクロールバーは、オーバーレイスクロールバーと呼ばれます。 このようなスクロールバーは通常部分的に透明で、背後のコンテンツが見える場合があります。 表示やサイズは、ユーザーの操作状況によって異なることがあります。

常にscrollbar gutterに配置され、 存在する場合はスペースを消費するスクロールバーはクラシックスクロールバーと呼ばれます。 このようなスクロールバーは通常不透明です。

クラシックスクロールバーか オーバーレイスクロールバーのどちらが使われる場合でも、 スクロールバーの表示やサイズ、開始端や終了端のどちらに表示されるかはUAの定義です。

注: どちら側にスクロールバーが表示されるかは、 OSの慣習や双方向性、 その他の人間工学的な観点によって異なる場合があります。

クラシックスクロールバーの場合、 scrollbar gutterの幅（存在する場合）は スクロールバーの幅と同じです。 オーバーレイスクロールバーの場合、 scrollbar gutterは存在しません。

注: scrollbar gutterを オーバーレイスクロールバーに対して有効にすることで対応できる既知のユースケースがありますが、 まだ満足できる設計は合意されていません。 これは今後このプロパティの拡張で対応される可能性があります。 CSS Overflow 4 § B scrollbar-gutterの拡張案も参照してください。

このプロパティの値の意味は以下の通りです：

auto

クラシックスクロールバーは scrollbar gutterを overflowがscroll、 またはoverflowがautoで ボックスがオーバーフローしている場合に消費します。 オーバーレイスクロールバーはスペースを消費しません。

stable

scrollbar gutterは クラシックスクロールバーの場合、 overflowがhidden、 scroll、 またはautoのいずれかで、 ボックスが実際にオーバーフローしているかどうかに関わらず常に存在します。 オーバーレイスクロールバーはスペースを消費しません。

注: これはスクロールバー自体が表示されるかどうかを変えるものではなく、 グラターの有無だけに影響します。

both-edges

もしscrollbar gutterが ボックスのインライン開始端またはインライン終了端のいずれかに存在する場合、 反対側にももう一つscrollbar gutterを 用意しなければなりません。

scrollbar gutterが存在するがスクロールバーがない場合、 またはスクロールバーが透明でグラターを完全に覆っていない場合、 scrollbar gutterの背景はパディングの拡張として描画されなければなりません。

overflowプロパティと同様に、 scrollbar-gutterをルート要素に設定した場合、 UAはビューポートにそれを適用しなければならず、 ルート要素自体の使用値はscrollbar-gutter: autoです。 ただし、overflowプロパティとは異なり、 UAはHTMLのbody要素から scrollbar-gutterを伝播してはなりません。

5. 自動エリプシス

5.1. オーバーフローエリプシス: text-overflow プロパティ

このプロパティはインライン内容が ブロックコンテナ要素（「ブロック」）のインライン進行方向の end ラインボックス端をオーバーフローする際の描画を指定します。 ただし、overflowが visible以外の場合です。

テキストがオーバーフローするのは、例えば折り返しが防止されている場合 （例：white-space: nowrap や、単語が長すぎて収まりきらない場合）などです。 値の意味は以下の通りです：

clip

ブロックコンテナ要素からオーバーフローしたインライン内容をクリップします。文字が部分的にしか描画されない場合があります。

ellipsis

クリップされたインライン内容を表すために省略記号（U+2026）を描画します。 実装によっては、より言語・スクリプト・書字モードに適した省略記号や、 省略記号が利用できない場合は「...」で代用することもあります。

このプロパティ定義で使われる「文字」という用語は可読性のためであり、実装上は「グラフェムクラスタ」[UAX29]を意味します。

ellipsis値の場合、 実装は文字および アトミックインラインレベル要素を、 ラインのend端で省略記号が収まるように隠し、 省略記号は残ったインライン内容のend端に直近で配置されます。 ライン上の最初の文字や アトミックインラインレベル要素は 省略せずクリップしなければなりません。

div {
  font-family: monospace;
  white-space: pre;
  overflow: hidden;
  width: 9ch;
  text-overflow: ellipsis;
}

省略の詳細

• 省略は描画のみに影響し、レイアウトやポインターイベントのディスパッチには影響しません。 UAは省略記号上のポインターイベントを省略された要素にディスパッチすべきです。 text-overflowがnoneであったかのように扱います。
• 省略記号はブロックに合わせてスタイル・ベースライン配置されます。
• 省略は相対位置や他のグラフィカル変形の後に行われます。
• 省略記号に十分なスペースがない場合、 省略記号自体の描画をクリップします （同じ側で、ライン上の中立文字がtext-overflow:clip値でクリップされる場合と同様）。

省略記号とユーザー操作

• ユーザーがコンテンツを操作（編集・選択・スクロール等）している際、 UAはtext-overflow: ellipsisをtext-overflow: clipとして扱ってもよい。
• 省略記号を選択すると、省略されたテキストが選択されるべきです。 省略されたテキスト全てが選択された場合、UAは省略記号の選択も表示すべきです。 部分選択時の挙動はUAに委ねられます。

div {
  font-family:Helvetica,sans-serif; line-height:1.1;
  width:3.1em; padding:.2em; border:solid .1em black; margin:1em 0;
}

<div>
CSS IS AWESOME, YES
</div>

<div style="text-overflow:clip; overflow:hidden">
CSS IS AWESOME, YES
</div>

<div style="text-overflow:ellipsis; overflow:hidden">
CSS IS AWESOME, YES
</div>

<div style="text-overflow:ellipsis; overflow:hidden">
NESTED
 <p>PARAGRAPH</p>
WON’T ELLIPSE.
</div>

注: 省略記号を配置するラインの側は、 ブロックのdirectionによって決まります。 例えば右から左へのoverflow hidden (direction: rtl) ブロックはインライン内容を左 側でクリップするため、 text-overflowの省略記号も左に配置され、クリップされた内容を表します。

省略記号とスクロールインターフェースの相互作用

このセクションはtext-overflow:clip以外（非clipなtext-overflow）かつoverflow:scrollの要素に適用されます。

非clipなtext-overflowを持つ要素が、テキストのインライン進行方向でscrollのoverflowを持ち、 ブラウザがスクロール機構（例えば要素のスクロールバーやタッチによるスワイプスクロールなど）を提供する場合、 より良いユーザー体験のための追加実装詳細があります：

要素がスクロールされた場合（ユーザー操作やDOM操作等）、 より多くの内容が表示されます。 text-overflowの値は、より多くの内容が表示されるかどうかに影響してはなりません。 非clipなtext-overflowが設定されている場合、 追加の内容が表示可能になった時には、実装は収まる範囲で追加の内容を表示し、 クリップされるべき内容（または省略記号／文字列のために必要な分）だけを省略し、 要素が十分スクロールされて内容の端が表示できる場合は、省略記号ではなく内容を表示すべきです。

div.crawlbar {
  text-overflow: ellipsis;
  height: 2em;
  overflow: scroll;
  white-space: nowrap;
  width: 15em;
  border:1em solid black;
}

<div class="crawlbar">
CSS is awesome, especially when you can scroll
to see extra text instead of just
having it overlap other text by default.
</div>

コンテンツがスクロールされている間、実装は省略記号の描画位置（ボックス端への配置など）を調整してもよいです。

付録A. プライバシーの考慮事項

この仕様は新たなプライバシー懸念を導入しません。

付録B. セキュリティの考慮事項

この仕様は新たなセキュリティ懸念を導入しません。

付録C. 変更点

この付録は参考情報です。

2023年3月29日ワーキングドラフト以降の主な変更点：

• overflow: hiddenがoverflow: clipとして置換要素上で扱われることを定義。 (Issue 7714)

• オーバーフローする内容分配とスクロールコンテナの相互作用を、 レイアウトに影響を与えず、スクロール可能なオーバーフロー領域の範囲にのみ影響するよう再定義。 (Issue 4957)

• 他の仕様が本仕様の概念に接続できるように、いくつかの用語を追加定義。

以前の変更点も参照。

謝辞

特に下記の方々のフィードバックに感謝します: Rossen Atanassov, Tab Atkins, Bert Bos, Tantek Çelik, John Daggett, Daniel Glazman, Vincent Hardy, Ian Kilpatrick, Håkon Wium Lie, Peter Linss, Robert O’Callahan, Florian Rivoal, Alan Stearns, Steve Zilles, そして www-styleコミュニティの皆様。