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. 值定义

本规范遵循 CSS 属性定义约定（见 [CSS2]），并采用 值定义语法（见 [CSS-VALUES-3]）。 未在本规范中定义的值类型，均在 CSS Values & Units [CSS-VALUES-3] 中定义。 与其他 CSS 模块结合时，这些值类型的定义可能会扩展。

除各属性定义中列出的特定值外， 本规范定义的所有属性 也接受 CSS 全局关键字 作为属性值。 为便于阅读，未在各处重复列出。

1.2. 模块交互

本模块替代并扩展了 [CSS2] 中 11.1 溢出与裁剪 以及 [CSS-UI-3] 中 5.2. 溢出省略号：text-overflow 属性 的相关内容。

2. 溢出概念与术语

CSS 使用 overflow 一词描述 超出盒子某一边界（即 content edge、padding edge、border edge 或 margin edge）的内容。 该术语既可指导致溢出的元素或特性， 也可指这些特性所占据的非矩形区域， 更常见的是指包围该区域的最小矩形。 盒子的溢出根据其自身及所有包含该盒子的 包含块链 的后代的布局和样式计算。

在大多数情况下，overflow 可通过盒子自身的边界和属性， 加上其每个子元素的 overflow，计算得出。 但并非总是如此；例如， 当某些子元素使用 transform-style: preserve-3d [CSS3-TRANSFORMS] 时， 其后代中同样设置了 transform-style: preserve-3d 的元素也需一并考虑。

溢出有两种类型， UA 会根据不同目的使用：

• 墨水溢出
• 可滚动溢出

2.1. 墨水溢出

盒子的 墨水溢出 是指该盒子及其内容在盒子边框外产生的视觉效果部分。 墨水溢出是指那些不会影响布局或扩展 可滚动溢出区域 的绘制效果的溢出， 如 盒阴影、边框图片、文本装饰、 悬挂字形（如负边距或字母升降超出 em 框）、轮廓线等。

由于 CSS 中某些效果（如 text-shadow [CSS-TEXT-3] 和 box-shadow [CSS-BACKGROUNDS-3] 的模糊效果，理论上可无限扩展） 并未定义其视觉范围，因此 墨水溢出 的范围是未定义的。

墨水溢出区域是 盒子及其内容的 墨水溢出 所占据的非矩形区域， 墨水溢出矩形是 包含 墨水溢出区域的、与盒子轴线对齐的最小矩形。 注意 墨水溢出矩形 在盒子的坐标系下是矩形， 但在其他坐标系下由于变换可能不是矩形。[CSS3-TRANSFORMS]

任何 替换内容 的溢出始终属于 墨水溢出（而非 可滚动溢出）。

2.2. 可滚动溢出

盒子的 可滚动溢出 是指 超出该盒子内边距边界且需要提供滚动机制的内容集合。

可滚动溢出区域是 可滚动溢出所占据的非矩形区域，可滚动溢出矩形是 包含 可滚动溢出区域的、与盒子轴线对齐的最小矩形。

可滚动溢出区域是以下内容的并集：

• 滚动容器自身的 内边距盒。
• 所有由 滚动容器直接包含的 行盒。
• 所有以该容器为包含块且边框盒未完全位于 负可滚动溢出区域的盒子的边框盒， 变换需通过将每个盒子投影到建立其 3D 渲染上下文的元素所在平面来处理。[CSS3-TRANSFORMS]

  此处关于变换处理的描述是否足够准确？

  零面积的边框盒不影响 可滚动溢出区域。

• 作为包含块的盒子所包含的 网格项和 弹性项盒子的外边距区域。

  UA 也可以额外包含其他作为包含块的盒子的外边距区域； 但这些外边距区域被包含的条件在本级未定义。此问题需进一步测试和研究， 已在本草案中暂缓。

• 上述所有盒子的 可滚动溢出区域（包括零面积盒子， 并按上述方式处理变换）， 前提是这些盒子自身设置了 overflow: visible（即未自身截断溢出）， 且 可滚动溢出尚未被裁剪 （如通过 clip 属性或 contain 属性裁剪）。

  注： mask-* 属性 [CSS-MASKING-1] 不影响 可滚动溢出区域。

  需评估哪些内容应/不应裁剪 可滚动溢出。[Issue #8607]

• 为满足 place-content: end 对齐要求， 在 end 侧对 可滚动溢出矩形添加的额外内边距。

  注： 此内边距在 可滚动溢出矩形内， 表示盒子自身的内边距， 这样当内容滚动到末端时， 流内（或浮动）内容的末端与盒子边框之间会有内边距。 通常该内边距与盒子自身的内边距大小相同， 但在某些情况下（如有脱离文档流定位的元素，或后代的可见溢出已扩展 可滚动溢出矩形超出概念上的“内容边界”），会有所不同。

  

此外，出于 Web 兼容性考虑 （因作者利用遗留漏洞将内容隐藏于视觉读者但未隐藏于搜索引擎或语音输出）， UA 必须裁剪 负可滚动溢出区域中的内容（即表现为在 scroll origin 错误一侧没有 可滚动溢出）。

注： 可滚动溢出矩形在盒子自身坐标系下始终为矩形， 但在其他坐标系下由于变换可能不是矩形。[CSS3-TRANSFORMS]。 这意味着有时会出现实际上不需要的滚动条。

2.3. 滚动溢出

盒子的 overflow 可以是可见或被裁剪。 CSS 还允许盒子成为 滚动容器，允许用户将被裁剪的 可滚动溢出区域部分滚动到视野中。 滚动容器的可视视口（用于查看 可滚动溢出区域） 与其内边距盒重合， 称为 scrollport。 盒子的 最近 scrollport 是其最近 滚动容器祖先的 scrollport。

滚动操作可由用户发起 （如操作滚动条、滑动触摸屏或使用键盘控制）， 也可由脚本发起 （如通过 scrollIntoView() 或 focus() API）。 可滚动溢出矩形在 scrollport 内的初始位置（在任何滚动操作生效前）称为 初始滚动位置。 初始滚动位置通常取决于 滚动容器的 书写模式， 并且除非另有规定， 与其 滚动原点位置一致。 但 align-content 和 justify-content 属性 [CSS-ALIGN-3] 可用于改变 初始滚动位置， 详见 CSS Box Alignment 3 § 5.3 溢出与滚动位置。

滚动位置是 可滚动溢出矩形在其 scrollport 内的特定对齐方式。 它关联一个 滚动偏移量，即其距离 滚动原点的距离。

滚动原点是 可滚动溢出矩形的锚点坐标， 可滚动溢出矩形即从此点扩展。 除非另有规定， 它是 block-start inline-start 角。 （例如，在 弹性容器中，是 main-start cross-start 角。） 在任一轴上超出 滚动原点的区域 被视为 负可滚动溢出区域： 此处渲染的内容对读者不可访问， 详见 § 2.2 可滚动溢出。 当 滚动容器的 滚动原点与其 scrollport 的对应角重合时， 该容器被认为滚动到了 滚动原点。 此 滚动位置即 滚动原点位置， 通常但不总是与 初始滚动位置一致。

需检查诸如 基线对齐等是否依赖 初始滚动位置或 滚动原点位置。

未定义 滚动偏移量的坐标系。 其值是向下/向右增加， 还是沿块/内联轴末端增加， 或是远离 滚动原点，均未定义。 是否应由各 API 单独定义其坐标模型？

根视口（用于滚动页面 画布） 使用 主书写模式来确定 其 滚动原点和 初始滚动位置。

注： 当 滚动容器（或其祖先之一）是图形变换的目标时， UA 可能需要在将用户输入映射到滚动操作时考虑该变换。 例如，在触摸屏上用户通过直接拖动内容进行滚动时， 变换应被考虑以使滚动方向与手势一致。 而其他用户输入（如 Page Down 键或一维滚轮） 则更适合忽略变换。 为每种滚动机制选择合适的行为由 UA 决定。

3. 滚动与裁剪溢出

3.1. 溢出管理：overflow-x、overflow-y 和 overflow 属性

这些属性用于指定盒子的 溢出是否被裁剪， 如果裁剪， 是否为 滚动容器。

overflow-x 属性用于指定 水平轴（即盒子的左右两侧）上的 溢出处理方式， overflow-y 属性用于指定 垂直轴（即盒子的上下两侧）上的 溢出处理方式。

overflow-block 和 overflow-inline 属性同样用于指定 溢出在 块和 内联轴上的处理方式。

这四个属性与 overflow 简写属性一起， 组成一个 逻辑属性组， 并按 CSS Logical Properties 1 § 4 流向相关盒模型属性中的定义进行交互。

overflow 属性是一个 简写属性，用于依次设置 overflow-x 和 overflow-y 的指定值。 如果省略第二个值，则取第一个值。

各值含义如下：

visible

不对溢出做特殊处理，即盒子内容如果定位在盒子外部则会被渲染出来。该盒子不是 滚动容器。

hidden

此值表示盒子内容会被裁剪到 内边距盒，UA 不应提供任何滚动界面来查看裁剪区域外的内容，也不允许用户通过直接操作（如触摸拖动或鼠标滚轮）进行滚动。但内容仍可通过编程方式滚动，例如使用 [CSSOM-VIEW] 中定义的机制，因此该盒子仍为 滚动容器。

clip

此值表示盒子内容会被裁剪到 overflow clip edge，UA 不应提供任何滚动界面来查看裁剪区域外的内容。 此外，与 overflow: hidden 仍允许编程滚动不同，overflow: clip 完全禁止任何滚动机制， 因此该盒子不是 滚动容器。

与 hidden 不同，此值不会使元素建立新的格式化上下文。

注： 作者如需盒子建立格式化上下文，可结合 display: flow-root 与 overflow: clip 使用。

scroll

此值表示内容会被裁剪到 内边距盒，但可以滚动到视野中（因此该盒子是 滚动容器）。此外，如果 UA 使用屏幕上可见的滚动机制（如滚动条或平移器），无论内容是否被裁剪都应显示该机制，以避免滚动条在动态环境中出现和消失的问题。对于 print 媒介，溢出内容可能会被打印；但打印位置未定义。

auto

当盒子有 可滚动溢出时，行为如 scroll；否则如 hidden。因此，如果 UA 使用屏幕上可见的滚动机制（如滚动条或平移器），仅在有溢出时才显示该机制。

visible/clip 作为 overflow 的值时，如果 overflow-x 或 overflow-y 不是 visible 或 clip，则分别计算为 auto/hidden。

如果 overflow 在 块盒上的计算值既不是 visible 也不是 clip 或其组合， 则会为其内容建立一个 独立格式化上下文。

UA 还必须支持 overlay 关键字， 作为 遗留值别名，等同于 auto。

3.1.1. visibility 与 overflow 的交互

如果 visibility 属性的计算值为 hidden（或 collapse，当其效果与 hidden 相同）， 且 overflow 为 scroll 或 auto， 则：

• UA 不得显示任何滚动机制。 如果在没有 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 时， 裁剪区域会根据圆角半径进行圆角处理， 并以 内边距边缘为基准， 具体见 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 的圆角形状， 与 外部盒阴影的扩展半径一致， 以盒子的 border edge 为基准。 详见 CSS Backgrounds 3 § 4.2 角形状 及 CSS Backgrounds 3 § 6.1.1 阴影形状、扩展与遮罩， 特别注意超出 border edge 的扩展公式。

注： 该属性对 overflow: hidden 或 overflow: scroll 的盒子无效， 因为这些值不会使用 overflow clip edge。

3.3. 溢出视口传递

当根元素的 overflow-* 属性值设置后， 且其 display 属性值不是 none 时， UA 必须将这些值应用到 视口。 但如果根元素是 [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 可选择忽略此属性。

4. 滚动条与布局

4.1. 滚动条对尺寸的影响

为元素盒子边缘的滚动条预留空间时， 该空间插入在内边框边缘与外内边距边缘之间。 对于 背景定位区域和 背景绘制区域而言， 该预留空间视为 内边距盒的一部分。

<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>

当盒子为内在尺寸时， 该预留空间会加到内容尺寸上。 否则会从分配给 内容区域的空间中减去。 若滚动条的存在会影响尺寸， 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 属性允许作者单独控制 滚动条槽 的存在， 与 overflow 属性控制滚动条本身的出现相互独立。

该属性影响 滚动条槽 在盒子的 inline-start 边或 inline-end 边的存在。

盒子的 滚动条槽 在 block-start 边和 block-end 边的存在， 在本级别无法控制， 且与 滚动条槽在 inline-start 或 inline-end 边的存在方式一致， 当 scrollbar-gutter 为 auto 时。

默认放置在内容盒上的滚动条， 不会导致 滚动条槽 的出现， 称为 overlay scrollbars（覆盖型滚动条）。 此类滚动条通常半透明，可显示其下方内容。 外观和尺寸可能因用户交互方式而变化。

始终放置在 滚动条槽内、出现时占用空间的滚动条， 称为 classic scrollbars（经典滚动条）。 此类滚动条通常不透明。

无论使用 经典滚动条还是 覆盖型滚动条， 滚动条的外观、尺寸以及出现在哪一侧由 UA 决定。

注： 滚动条出现在哪一侧可能取决于操作系统习惯、 双向性或其他人体工学因素。

对于 经典滚动条， 滚动条槽的宽度（如存在，见下文） 与滚动条宽度一致。 对于 覆盖型滚动条， 不存在 滚动条槽。

注： 已知有些场景需要为 覆盖型滚动条启用 滚动条槽， 但目前尚无满意设计，未来可通过扩展属性解决。 详见 CSS Overflow 4 § B 滚动条槽的可能扩展。

该属性各值含义如下：

auto

经典滚动条在 overflow 为 scroll， 或 overflow 为 auto 且盒子溢出时， 会预留 滚动条槽空间。 覆盖型滚动条不占用空间。

stable

经典滚动条在 overflow 为 hidden、 scroll 或 auto 时， 无论盒子是否实际溢出，都会预留 滚动条槽空间。 覆盖型滚动条不占用空间。

注： 此设置不会改变滚动条本身是否可见， 仅影响滚动条槽的存在。

both-edges

如果某一侧（inline-start 或 inline-end）本应有 滚动条槽， 则另一侧也必须有 滚动条槽。

当 滚动条槽存在但滚动条未显示， 或滚动条为透明或未完全遮盖 滚动条槽时， 滚动条槽的背景应作为内边距的延伸进行绘制。

与 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 边缘。 行首的第一个字符或 原子内联级元素必须被裁剪而非省略。

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（非裁剪型 text-overflow）且 overflow:scroll 的元素。

当元素的 text-overflow 非裁剪型且 overflow 为 scroll， 且浏览器提供滚动机制（如滚动条或触摸滑动）， 实现会有额外细节以提升用户体验：

当元素被滚动（如用户操作或 DOM 操作）， 会显示更多内容。 text-overflow 的值不应影响内容是否能显示更多。 如果设置了非裁剪型 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>

内容滚动时，实现可调整省略号的渲染（如对齐到盒子边缘而非行边缘）。

示例 CSS 和 HTML 效果：

内容滚动时，可以实现可调整的省略号渲染（例如对齐到盒子边缘而不是行边缘）。

附录 A. 隐私注意事项

本规范未引入新的隐私问题。

附录 B. 安全注意事项

本规范未引入新的安全问题。

附录 C. 变更记录

本附录为说明性内容。

自 2021-12-02 工作草案以来的变更

• 要求块容器的终止边缘 padding 必须包含在 可滚动溢出区域中；此前对于 块容器采用 normal 内容分布时为可选，待 Web 兼容性调查。(Issue 129)

• 更精确地定义了 -webkit-line-clamp 与各类 line-clamp 长属性的交互。详见 CSS Overflow 4 § 5.1.1 兼容性。(Issue 6842)

• 澄清了 区域断点会触发 continue: discard 丢弃后续内容（其他类型断点不会）；并给出了触发此类盒子 区域断点的示例。

• 细节澄清：

  • 使用 <length-percentage>值定义时，采用 CSS 括号范围标记法进行注释。

自 2020-06-03 工作草案以来的变更

• 将 scroll-behavior 属性从 [CSSOM-VIEW] 移至本规范。

• 采纳了 scrollbar-gutter 属性，原定义于 [CSS-OVERFLOW-4]。

• 为 overflow-clip-margin 属性添加了盒边关键字。 (Issue 5801)

• 澄清了 border-radius 与 overflow-clip-margin 的交互。

• 补充了关于用户滚动手势与变换的说明。

• 收紧了关于将 margin、padding 及零面积盒纳入 可滚动溢出区域的要求。 (Issue 129, Issue 4791)

• 更精确地定义了滚动条对布局的影响。 (Issue 3348)

• 处理了 overflow 向视口传播的各种边界情况。 (Issue 3779, Issue 5913)

• 其他小型澄清和修正。

自 2018-07-31 工作草案以来的变更

• 修正了标记错误和拼写错误

• 进行了多项编辑澄清并修复了不一致之处

• 将 block-overflow 重命名为 block-ellipsis

• 定义 text-overflow 可影响溢出的 块溢出省略号

• 定义当 块溢出省略号 长于行时的行为

• 定义 block-ellipsis 与 ::first-line / ::first-letter 的交互

• 调整了使用 continue: discard 的元素的固有尺寸

• 定义如何布局 块溢出省略号

• 定义 -webkit-line-clamp 的遗留行为以兼容现有内容

• 定义终止 padding 包含在可滚动溢出区域，块容器除外（因 Web 兼容性问题更难处理）

• 定义 flex 和 grid 项的 margin 包含在可滚动溢出区域

• 不从无盒元素传播 overflow

• 将“scrollable overflow region”重命名为“scrollable overflow area”

• 引入 overflow-clip-margin 属性

早于 2018-07-31 工作草案的变更

早于 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 社区成员。