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. インクオーバーフロー

インクオーバーフローは、 ボックスおよびその内容のうち、ボックスのborder boxの外側に視覚効果を生じる部分です。 インクオーバーフローは、レイアウトに影響しない、またはscrollable overflow areaを拡張しないと定義された描画効果のオーバーフローです。 例：box-shadow、border images、text decoration、 負のサイドベアリングやem box外に伸びるアセンダー/ディセンダーを持つグリフ、outlinesなど。

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

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

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

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

スクロール可能なオーバーフローは、 ボックスのpadding edgeの外側に拡張され、スクロール機構が必要なものの集合です。

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

スクロール可能なオーバーフロー領域は以下の和集合です：

• scroll container自身のpadding box
• line boxで、scroll containerが直接含むもの
• containing blockとなるすべてのボックスのborder boxで、 そのborder boxが完全にnegative scrollable overflow region内にないもの。 変形は、各ボックスをその3D rendering contextの平面に投影して考慮します。[CSS3-TRANSFORMS]

  変形の扱いが十分正確か要確認。

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

• grid itemやflex itemボックスのmargin領域で、 ボックスがcontaining blockを確立するもの。

  UAは追加で、containing blockを確立する他のボックスのmargin領域も含める場合がありますが、 その条件は本レベルでは未定義です。さらなる検証と調査が必要なため、本ドラフトでは保留。

• 上記すべてのボックス（面積ゼロのボックスも含む）のスクロール可能なオーバーフロー領域で、 それ自体がoverflow: visible（オーバーフローを閉じ込めない）かつ スクロール可能なオーバーフローが既にクリップされていない場合 （例：clipプロパティや containプロパティによる）。

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

  何がスクロール可能なオーバーフローをクリップすべきか要検討。[Issue #8607]

• end側に追加されるパディングで、 スクロール可能なオーバーフロー矩形内で place-content: endの要件を満たすスクロール位置を可能にします。

  注: このパディングは、 スクロール可能なオーバーフロー矩形内で ボックス自身のパディングを表し、 コンテンツが端までスクロールされたとき、流れ内（または浮動）コンテンツの端とボックスのborder edgeの間にパディングができます。 通常はボックス自身のパディングと同じサイズになりますが、 例外として、アウトオブフローの配置要素や子孫の可視オーバーフローによって スクロール可能なオーバーフロー矩形が 概念上の“content edge”の外側に拡張されている場合などがあります。

  

さらに、Web互換性の制約（著者がレガシーバグを利用して、視覚的な読者からは隠しつつ検索エンジンや音声出力には表示するため）により、 UAはnegative scrollable overflow region内のコンテンツをクリップしなければならず、 スクロール可能なオーバーフローがscroll originの反対側にないかのように振る舞います。

注: スクロール可能なオーバーフロー矩形は 常にボックス自身の座標系では矩形ですが、変形によって他の座標系では非矩形になる場合があります。[CSS3-TRANSFORMS] そのため、実際には不要な場合でもスクロールバーが表示されることがあります。

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

ボックスのoverflowは、可視またはクリップされる場合があります。 CSSでは、ボックスをscroll containerとして、クリップされた部分のスクロール可能なオーバーフロー領域をユーザーがスクロールして表示できるようにすることも可能です。 scroll containerの視覚的ビューポート（スクロール可能なオーバーフロー領域を表示する部分）は そのpadding boxと一致し、scrollportと呼ばれます。 ボックスのnearest scrollportは、最も近いscroll container祖先のscrollportです。

スクロール操作は、ユーザーによる（スクロールバー操作、タッチスクリーンのスワイプ、キーボード操作など） またはスクリプトによって開始できます （例：scrollIntoView() やfocus() APIなど）。 スクロール操作が行われる前のスクロール可能なオーバーフロー矩形のscrollport内での初期位置は、初期スクロール位置です。 初期スクロール位置は、通常scroll containerのwriting modeに依存し、 特に指定がない限り、scroll origin positionと一致します。 ただし、align-contentやjustify-contentプロパティ [CSS-ALIGN-3]によって 初期スクロール位置を変更できます。 詳細はCSS Box Alignment 3 § 5.3 Overflow and Scroll Positionsを参照してください。

スクロール位置は、 スクロール可能なオーバーフロー矩形がscrollport内でどのように揃えられているかを示します。 スクロールオフセットは、scroll originからの距離です。

scroll originは、 スクロール可能なオーバーフロー矩形の基準座標であり、 そこからスクロール可能なオーバーフロー矩形が拡張されます。 特に指定がない限り、block-start inline-startの角がスクロール可能なオーバーフロー矩形の基準となります。 （例：flex containerでは、main-start cross-startの角です。） scroll originより外側の領域は negative scrollable overflow regionとされ、 ここに描画されたコンテンツは読者がアクセスできません。 詳細は§ 2.2 スクロール可能なオーバーフローを参照。 scroll containerが scroll originにスクロールされているとは、 scroll originがscrollportの対応する角と一致している状態です。 このスクロール位置、 scroll origin positionは、 通常は初期スクロール位置と一致しますが、必ずしもそうとは限りません。

baseline alignmentなどが初期スクロール位置または scroll origin positionに依存するか要確認。

scroll offsetsの座標系が定義されていません。 下方向/右方向、ブロック/インライン軸の終端方向、またはscroll originから離れる方向かは未定義です。 各APIが座標モデルを定義すべきでしょうか？

ページのルートビューポート（canvasをスクロールするもの）は、 principal writing modeを用いて scroll originと 初期スクロール位置を決定します。

注: scroll container（またはその祖先）が グラフィカルな変形の対象となっている場合、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 Flow-Relative Box Model Propertiesで定義されるように相互作用します。

overflowプロパティは略式プロパティであり、overflow-xとoverflow-yの指定値をこの順で設定します。 2つ目の値が省略された場合は、1つ目の値がコピーされます。

値の意味は以下の通りです：

visible

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

hidden

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

clip

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

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

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

scroll

この値は、 内容がpadding boxでクリップされますが、 スクロールして表示することができます （このためボックスはスクロールコンテナです）。 さらに、UAが画面上にスクロール機構（スクロールバーやパナーなど）を表示する場合、 その機構は内容がクリップされているかどうかに関わらず表示されるべきです。 これにより、動的な環境でスクロールバーが表示・非表示になる問題を回避します。 対象メディアがprintの場合、 オーバーフローした内容が印刷されることがありますが、 どこに印刷されるかは定義されていません。

auto

ボックスにスクロール可能なオーバーフローがある場合は scrollと同様に、 それ以外の場合はhiddenと同様に動作します。 したがって、UAが画面上にスクロール機構（スクロールバーやパナーなど）を表示する場合、 オーバーフローがある場合のみその機構が表示されます。

visible／clip値は、overflowの算出値として auto／hidden （それぞれ） となります。 これは、overflow-xまたはoverflow-yのいずれかが visibleまたはclip以外の場合に適用されます。

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

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

3.1.1. visibilityとoverflowの相互作用

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

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

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

• インタラクティブな直接スクロールの禁止は、 ユーザーがvisibility: hiddenが設定されたscroll containerの子孫で visibility: visibleが設定されている要素に マウスホイールなどで操作した場合でも適用されます。

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

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

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

• 両方のoverflow-xとoverflow-yの算出値がclipの場合、 クリッピング領域は§ 3.2 Expanding Clipping Bounds: the overflow-clip-margin propertyで述べられているように丸められます。

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

3.1.3. 印刷やその他の静的メディアでのオーバーフロー

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

scroll containerが 非インタラクティブなメディア上で overflow値としてautoまたはscroll （ただしhiddenは除く）を持つ場合、 UAはスクロール可能なオーバーフローの存在を示すために スクロールバーや省略記号などを表示してもよいです。

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

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

このプロパティはボックスのoverflow clip edgeを定義します。 つまり、ボックスの境界からどれだけ外側まで 内容が描画されることを許可し、 overflow: clipなどの効果によって overflow clip edgeでクリップされる前の範囲を定めます。

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

<visual-box>

クリップ境界の基準となるボックスの端を指定します（オフセットがゼロの場合の起点）。

省略時はpadding-boxが既定値です。

<length [0,∞]>

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

overflow clip edgeの角の形状は、 ボックスのborder edgeから同じ合計オフセット分広げた outer box-shadow と全く同じ方法で丸められます。 詳細はCSS Backgrounds 3 § 4.2 Corner Shapingおよび CSS Backgrounds 3 § 6.1.1 Shadow Shape, Spread, and Knockoutを参照してください。 特に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 強いcontainment: containプロパティを参照してください。

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

ビューポートに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はこのプロパティを無視してもかまいません。

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

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

要素のボックス端にスクロールバー用のスペースを確保する場合、 そのスペースは内側のborder edgeと外側のpadding edgeの間に挿入されます。 ただし、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プロパティ

要素の内側のborder edgeと外側のpadding edgeの間に、UAがスクロールバー表示のために確保するスペースは scrollbar gutter （スクロールバーガター）と呼ばれます。

scrollbar-gutterプロパティは、 著者がスクロールバーガターの有無を制御できるようにします。 これは、overflowプロパティによるスクロールバー自体の制御とは別です。

このプロパティは、ボックスのスクロールバーガターが inline start端や inline end端に 配置されるかどうかに影響します。

スクロールバーガターが block start端や block end端に 配置されるかどうかは、このレベルでは制御できません。 これは、スクロールバーガターが inline start端や inline end端に 配置される場合と同じ方法で決定されます（scrollbar-gutterがautoの場合）。

デフォルトでcontent box上に配置され、スクロールバーガターを 作成しないスクロールバーは オーバーレイスクロールバー と呼ばれます。 これらのスクロールバーは通常半透明で、背後のコンテンツが見える場合があります。 外観やサイズは、ユーザーの操作状況によって変化することがあります。

常にスクロールバーガター内に配置され、表示時にスペースを消費するスクロールバーは クラシックスクロールバー と呼ばれます。 これらは通常不透明です。

クラシックスクロールバーか オーバーレイスクロールバーのどちらが使われるか、 スクロールバーの外観やサイズ、どちら側に表示されるかはUA定義です。

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

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

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

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

auto

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

stable

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

注: この値はスクロールバー自体の表示有無は変えません。 ガターの有無だけに影響します。

both-edges

もしスクロールバーガターが ボックスのinline start端またはinline end端のいずれかに存在する場合、 反対側にももう一つスクロールバーガターを存在させなければなりません。

スクロールバーガターが存在するが スクロールバー自体が表示されていない場合や、 スクロールバーが透明などでスクロールバーガターを完全に覆わない場合、 スクロールバーガターの背景はpaddingの延長として描画されなければなりません。

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値の場合、 実装はエリプシスを収めるために 行のatomic inline-level elementsや文字を end端から隠し、 エリプシスを残りのインラインコンテンツのend端に隣接して配置しなければなりません。 行の最初の文字やatomic inline-level elementは エリプシスではなくクリップされなければなりません。

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:clip以外（非clip text-overflow）かつoverflow:scrollの要素に適用されます。

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

要素がスクロールされた場合（ユーザー操作や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. 変更履歴

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

2021-12-02作業草案からの変更点 2021-12-02 Working Draft

• エンドエッジのpaddingを スクロール可能なオーバーフロー領域に含めることを ブロックコンテナに対して必須化。 これは以前は、block containersで normal content distributionの場合は任意だったが、 Web互換性調査の保留中だった。 (Issue 129)

• -webkit-line-clampと各種 line-clampロングハンドの相互作用をより厳密に定義。 詳細はCSS Overflow 4 § 5.1.1 レガシー互換性参照。 (Issue 6842)

• region breakが continue: discardで後続コンテンツを破棄するトリガーであることを明確化 （他の種類のbreakは該当しない）。 また、そのボックスでregion breakが発生する例も追加。

• 細かな明確化：

  • <length-percentage>値定義に CSSブラケット範囲表記を注釈。

2020-06-03作業草案からの変更点 2020-06-03 Working Draft

• scroll-behaviorプロパティを [CSSOM-VIEW]から 本仕様へ移動。

• 以前[CSS-OVERFLOW-4]で定義されていた scrollbar-gutterプロパティを採用。

• overflow-clip-marginに box-edgeキーワードを追加。 (Issue 5801)

• border-radiusと overflow-clip-marginの相互作用を明確化。

• ユーザースクロールジェスチャとtransformの注記を追加。

• マージン・パディング・ゼロ面積ボックスの スクロール可能なオーバーフロー領域への取り込み要件を厳格化。 (Issue 129, Issue 4791)

• スクロールバーのレイアウトへの影響をより厳密に定義。 (Issue 3348)

• overflowの ビューポートへの伝播に関する様々なエッジケースを処理。 (Issue 3779, Issue 5913)

• その他細かな明確化と修正。

2018-07-31作業草案からの変更点 2018-07-31 Working Draft

• マークアップエラーと誤字の修正

• 様々な編集上の明確化と不整合の修正

• block-overflowをblock-ellipsisに名称変更

• text-overflowが オーバーフローしたブロックオーバーフローエリプシスに影響することを定義

• 行より長いブロックオーバーフローエリプシスの挙動を定義

• block-ellipsisと ::first-line／::first-letterの相互作用を定義

• continue: discardを持つ要素の本質サイズ調整を定義

• ブロックオーバーフローエリプシスのレイアウト方法を定義

• 既存コンテンツとの互換性のための -webkit-line-clampのレガシー挙動を定義

• エンドパディングがスクロール可能なオーバーフロー領域に含まれることを定義 （ただしblock containersはWeb互換性の都合で例外）

• flex・gridアイテムのマージンがスクロール可能なオーバーフロー領域に含まれることを定義

• ボックスなし要素からのoverflow伝播を禁止

• 「scrollable overflow region」を「scrollable overflow area」に名称変更

• overflow-clip-marginプロパティを導入

2018-07-31作業草案以前の変更点 2018-07-31 Working Draft

2018-07-31作業草案公開以前の変更は、以下の変更履歴で確認できます：

• 2017-08-02～2018-07-31

• 2015-01-27～2017-08-01

• 2013-03-28～2015-01-27

• 2012-07-31～2013-03-27

謝辞

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