CSS 溢出模块第 3 级

1. 简介

在 CSS 第 1 级 [CSS1] 中，放置的内容超过指定尺寸的元素所能容纳的内容通常是一个编写错误。这样做会导致内容延伸到元素边界之外，从而可能导致该内容与其它元素重叠。

CSS Level 2 [CSS2] 引入了 overflow 属性，允许作者通过滚动处理溢出，这意味着它不再是一个创作错误。它还允许作者指定通过裁剪来处理溢出，当作者意图是不显示内容时，这是合理的。

本规范引入了长期存在的事实标准 overflow-x 和 overflow-y 属性，添加了一个 clip 值，并更完整地定义了溢出处理。

[省略关于 max-lines 的部分。]

注意：本规范还重新载入了之前在 [CSS-UI-3] 中定义的 text-overflow 属性的定义，没有任何添加或修改，以便将 text-overflow 和 block-ellipsis 一并展示。

1.1. 值定义

本规范遵循 [CSS2] 中的 CSS 属性定义约定，并使用 [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（溢出） 来描述盒子内容延伸到盒子边缘（即其内容边缘、内边距边缘、边框边缘或外边距边缘）之外的情况。该术语可以解释为导致此溢出的元素或特性、这些特性所占据的非矩形区域，或者更常见地，指界定该区域的最小矩形。盒子的溢出是基于盒子本身及其所有包含块链（containing block chain）中包含该盒子的后代的布局和样式计算得出的。

在大多数情况下，任何盒子的 overflow（溢出） 都可以根据该盒子本身的边界和属性，加上其每个子元素的 overflow 来计算。然而，情况并非总是如此；例如，当某些子元素使用 transform-style: preserve-3d [CSS3-TRANSFORMS] 时，也必须检查其任何具有 transform-style: preserve-3d 的后代。

有两种不同类型的溢出，由用户代理 (UA) 用于不同的目的。

• 墨迹溢出
• 可滚动溢出

2.1. 墨迹溢出 (Ink Overflow)

盒子的 墨迹溢出 (ink overflow) 是指该盒子及其内容中在盒子边框外产生视觉效果的部分。墨迹溢出是指定义为不影响布局或不以其他方式延伸 可滚动溢出区域 的绘制效果的溢出，例如 盒阴影 (box shadows)、边框图像 (border images)、文本装饰 (text decoration)、悬垂的字形（带有负侧边距，或上升部/下降部延伸到 em 框之外）、轮廓 (outlines) 等。

由于 CSS 中的某些效果（例如 text-shadow [CSS-TEXT-3] 和 box-shadow [CSS-BACKGROUNDS-3] 中的模糊效果，它们理论上是无限的）没有定义它们覆盖的视觉范围，因此 墨迹溢出 的范围是未定义的。

墨迹溢出区域 (ink overflow area) 是由盒子及其内容的 墨迹溢出 所占据的非矩形区域，而 墨迹溢出矩形 (ink overflow rectangle) 是轴与盒子轴对齐且包含 墨迹溢出区域 的最小矩形。注意，墨迹溢出矩形 在盒子的坐标系中是一个矩形，但由于变换，在其他坐标系中可能是非矩形的。 [CSS3-TRANSFORMS]

替换内容的任何溢出始终是 墨迹溢出（而不是 可滚动溢出）。

2.2. 可滚动溢出 (Scrollable Overflow)

盒子的 可滚动溢出 (scrollable overflow) 是指盒子填充边缘之外需要提供滚动机制的内容集合。

可滚动溢出区域 (scrollable overflow area) 是由 可滚动溢出 所占据的非矩形区域，而 可滚动溢出矩形 (scrollable overflow rectangle) 是轴与盒子轴对齐且包含 可滚动溢出区域 的最小矩形。

可滚动溢出区域 是以下各项的并集：

• 滚动容器 (scroll container) 自身的 内边距框 (padding box)。
• 滚动容器直接包含的所有 行框 (line boxes)。
• 所有以其作为包含块的盒子的边框框，且其边框框未完全位于 不可达的可滚动溢出区域 内的盒子，通过将每个盒子投影到建立其 3D 渲染上下文 的元素的平面上来计算变换。 [CSS3-TRANSFORMS]

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

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

• 盒子作为包含块的 网格项 (grid item) 和 弹性项 (flex item) 盒子的外边距区域。

  UA 可以额外包含盒子作为包含块的其他盒子的外边距区域；然而，包含此类外边距区域的条件在本级别中是未定义的。 这需要进一步测试和研究，因此在本草案中被推迟。

• 上述所有盒子的 可滚动溢出区域（包括零面积盒子并按上述方式考虑变换），前提是它们自身具有 overflow: visible（即它们自身不捕获溢出），并且 可滚动溢出 尚未被裁剪（例如通过 clip 属性或 contain 属性）。

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

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

• 为了启用满足 place-content: start 和 place-content: end 对齐要求的滚动位置，根据需要添加到 可滚动溢出矩形 的附加内边距。

  注意：此内边距在 可滚动溢出矩形 内表示盒子自身的内边距，以便当内容滚动到底部时，其流内（或浮动）内容边缘与盒子边框边缘之间存在内边距。它通常最终与盒子自身的内边距大小完全相同，除了极少数情况——例如当流外定位元素或后代的可见溢出已经增加了 可滚动溢出矩形 在 滚动容器 内容的概念“内容边缘”之外的大小时。

  

此外，由于 Web 兼容性限制（由作者利用遗留错误偷偷向视觉阅读器隐藏内容，但不向搜索引擎和/或语音输出隐藏内容引起），UA 必须裁剪 不可达的可滚动溢出区域 中的任何内容。

注意： 内容分布属性 可以 改变不可达的可滚动溢出区域，以确保 滚动容器 的 对齐主体 在对齐后是可达的。 [CSS-ALIGN-3]

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

2.3. 滚动溢出 (Scrolling Overflow)

盒子的 溢出 可以是可见的或裁剪的。CSS 还允许盒子成为 滚动容器 (scroll container)，允许将其 可滚动溢出区域 的裁剪部分滚动到视野中。 滚动容器 的视觉“视口”（通过它可以看到 可滚动溢出区域）与其内边距框重合，被称为 滚动端口 (scrollport)。盒子的 最近滚动端口 (nearest scrollport) 是其最近 滚动容器 祖先的 滚动端口。

滚动操作可以由用户发起（例如，通过操作滚动条、在触摸屏上滑动或使用键盘控制），也可以由脚本发起（例如，通过 scrollIntoView() 或 focus() API）。 可滚动溢出矩形 在任何滚动操作生效之前在 滚动端口 内的初始位置是 初始滚动位置 (initial scroll position)。 初始滚动位置 通常取决于 滚动容器 的 书写模式 (writing mode)，并且除非另有说明，否则与其 滚动原点位置 (scroll origin position) 重合。例如，scroll-initial-target 属性可用于改变 初始滚动位置。 [CSS-SCROLL-SNAP-2]

滚动位置 (scroll position) 是 可滚动溢出矩形 在其 滚动端口 内的一种特定对齐方式。它与 滚动偏移量 (scroll offset) 相关联，即其与 滚动原点 (scroll origin) 的距离。

滚动原点 (scroll origin) 是 可滚动溢出矩形 的锚坐标，可滚动溢出矩形 从该点向外扩展。除非另有说明，它是 可滚动溢出矩形 的 块起始 (block-start) 行内起始 (inline-start) 角。（例如，在 弹性容器 (flex container) 中，它是 主轴起始 (main-start) 交叉轴起始 (cross-start) 角。）除非进行其他调整（例如 通过内容对齐 [css-align-3]），否则在任一轴上超过 滚动原点 的区域都被视为 不可达的可滚动溢出区域 (unreachable scrollable overflow region)：此处渲染的内容对读者是不可访问的，请参阅 § 2.2 可滚动溢出。当 滚动容器 的 滚动原点 与其 滚动端口 的相应角重合时，称其已滚动到其 滚动原点。此 滚动位置，即 滚动原点位置 (scroll origin position)，通常（但不总是）与 初始滚动位置 重合。

检查 基线对齐 等事物是否取决于 初始滚动位置 或 滚动原点位置。

这没有为 滚动偏移量 定义坐标系。它们是向下/向右增加、向块/行内轴末端增加，还是远离 滚动原点 增加，均未定义。每个 API 是否都应定义其坐标模型？

滚动页面 画布 (canvas) 的根视口使用 主要书写模式 (principal writing mode) 来确定其 滚动原点 和 初始滚动位置。

注意：如果 滚动容器（或其祖先之一）是图形变换的目标，UA 在将用户输入映射到滚动操作时可能需要考虑此变换。例如，在用户通过直接拖动内容进行滚动的触摸屏上，预计会考虑变换以使滚动方向与手势匹配。另一方面，其他用户输入（例如 Page Down 键或一维滚动轮）在忽略变换时可能被更自然地解释。为每个滚动机制选择适当的行为是 UA 的责任。

3. 滚动与裁剪溢出

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

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

overflow-x 属性指定水平轴上的 溢出 处理（即盒子左右两侧的溢出），overflow-y 属性指定垂直轴上的 溢出 处理（即盒子顶部和底部的溢出）。

overflow-block 和 overflow-inline 属性同样分别指定 溢出 在 块轴 和 行内轴 上的处理。

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

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

值的含义如下：

visible

没有特殊的溢出处理，即盒子的内容如果放置在盒子外，则在盒子外渲染。该盒子不是 滚动容器。

该组件可以在本包或其他任何使用包的其他组件中被引用；它不能在使用包中被不同的组件覆盖。

此值表示盒子的内容被裁剪到其 内边距框 (padding box)，并且 UA 不得提供任何滚动用户界面来查看裁剪区域外的内容，也不允许通过用户的直接干预（例如在触摸屏上拖动或使用鼠标滚动轮）进行滚动。但是，内容必须仍然可以通过编程方式滚动，例如使用 [CSSOM-VIEW] 中定义的机制，因此该盒子仍然是一个 滚动容器。

clip

此值表示盒子的内容被裁剪到其 溢出裁剪边缘 (overflow clip edge)，并且 UA 不应提供任何滚动用户界面来查看裁剪区域外的内容。此外，与仍然允许编程滚动的 overflow: hidden 不同，overflow: clip 禁止通过任何机制进行任何滚动，因此该盒子不是一个 滚动容器。

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

注意：同时希望盒子建立格式化上下文的作者可以将 display: flow-root 与 overflow: clip 一起使用。

scroll

此值表示内容被裁剪到 内边距框，但可以滚动到视野中（因此该盒子是一个 滚动容器）。此外，如果用户代理使用了屏幕上可见的滚动机制（例如滚动条或平移器），则无论其内容是否被裁剪，都应显示该机制。这避免了在动态环境中滚动条出现和消失的任何问题。当目标媒体是 print 时，溢出的内容可能会被打印；在哪里打印未定义。

auto

类似于盒子具有 可滚动溢出 时的 scroll；否则类似于 hidden。因此，如果用户代理使用了屏幕上可见的滚动机制（例如滚动条或平移器），则只有在存在溢出时才会显示该机制。

scroll、auto 和 hidden 值被称为 overflow 的 可滚动值 (scrollable values)。visible 和 clip 值被称为 不可滚动值 (non-scrollable values)。

如果 overflow-x 或 overflow-y 之一既不是 visible 也不是 clip，则 overflow 的 visible/clip 值分别计算为 auto/hidden。在 替换元素 上，计算出的 hidden 值进一步解析为 clip 的 使用值 (used value)。

如果 块盒子 上 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 背景 3 § 4.3 角裁剪 中提到的，由 overflow 建立的裁剪区域可以是圆角的。

• 当 overflow-x 和 overflow-y 计算为 hidden、scroll 或 auto 时，裁剪区域根据边框半径进行舍入，并调整到 内边距边缘 (padding edge)，如 CSS 背景 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 可以显示任何可滚动溢出的指示，例如通过显示滚动条或省略号。

注意：并非所有 分页媒体 (paged media) 都是非交互的：例如，电子书阅读器对内容进行分页，但它们是交互式的。

3.2. 扩展裁剪边界：overflow-clip-margin 属性

此属性定义盒子的 溢出裁剪边缘 (overflow clip edge)，即盒子的内容在被定义为裁剪到 溢出裁剪边缘 的效果（例如上方的 overflow: clip）进行裁剪之前，究竟可以在边界外绘制多远。

值定义如下

<visual-box>

指定要用作 溢出裁剪边缘 原点的盒子边缘，即当指定的偏移量为零时。

如果省略，默认为 padding-box。

<length [0,∞]>

指定的偏移量决定了 溢出裁剪边缘 从指定盒子边缘扩展了多少。负值无效。如果省略，默认为零。

溢出裁剪边缘 在角处的整形方式与扩展半径为从盒子 边框边缘 的相同累积偏移量的 外部盒阴影 (outer box-shadow) 完全相同。请参阅 CSS 背景 3 § 4.2 角整形 和 CSS 背景 3 § 6.1.1 阴影形状、扩展和挖空，特别注意超出 边框边缘 的外延公式。

注意：此属性对具有 overflow: hidden 或 overflow: scroll 的盒子没有影响，这些值并未定义为使用 溢出裁剪边缘。

3.3. 溢出视口传播

当根元素的 display 值不是 none 时，UA 必须将设置在根元素上的 overflow-* 值应用于 视口。然而，当根元素是一个 [HTML] html 元素（包括 HTML 的 XML 语法），其 overflow 值为 visible（在两个轴上），并且该元素有一个子元素 body，其 display 值也不为 none 时，用户代理必须改为将该第一个此类子元素的 overflow-* 值应用于视口。从中传播值的元素随后必须具有 visible 的使用 overflow 值。

注意：在 HTML html 或 body 元素上使用 包含 (containment) 会禁用对 HTML body 元素的这种特殊处理。详情请参阅 CSS 包含 1 § 2 强包含：contain 属性。

注意：如果在移动设备上 ICB 小于视口，根元素上的 overflow: hidden 可能无法裁剪 初始包含块 (Initial Containing Block) 外的所有内容。

如果 visible 应用于视口，它必须被解释为 auto。如果 clip 应用于视口，它必须被解释为 hidden。

3.4. 平滑滚动：scroll-behavior 属性

scroll-behavior 属性指定当滚动发生于导航、滚动 API [CSSOM-VIEW] 或非用户发起的滚动捕捉操作 [CSS-SCROLL-SNAP-1] 时，滚动容器 的滚动行为。任何其他滚动，例如由用户执行的滚动，不受此属性影响。当在根元素上指定此属性时，它改为应用于 视口。

注意：HTML body 元素的 scroll-behavior 属性 *不会* 传播到视口。

auto

滚动容器以 即时 (instant) 方式滚动。

平滑

滚动容器使用用户代理定义的计时函数在用户代理定义的一段时间内以 平滑 (smooth) 方式滚动。用户代理应遵循平台约定（如果有）。

用户代理可以忽略此属性。

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

用户代理可能为显示滚动条而预留的内部边框边缘和外部内边距边缘之间的空间称为 滚动条槽 (scrollbar gutter)。

scrollbar-gutter 属性让作者能够控制 滚动条槽 的存在，这与 overflow 属性提供的控制滚动条存在的能力是分开的。

此属性影响放置在盒子 行内起始 (inline start) 边缘或 行内结束 (inline end) 边缘上的 滚动条槽 的存在。

放置在盒子 块起始 (block start) 边缘和 块结束 (block end) 边缘上的 滚动条槽 的存在在此级别中无法控制，其确定方式与 scrollbar-gutter 为 auto 时放置在盒子 行内起始 边缘或 行内结束 边缘上的 滚动条槽 的确定方式相同。

默认放置在内容框上方且不会导致创建 滚动条槽 的滚动条称为 覆盖滚动条 (overlay scrollbars)。此类滚动条通常是部分透明的，如果其下方有内容，则会显示出来。它们的外观和大小可能会根据用户是否以及如何与它们交互而变化。

始终放置在 滚动条槽 中，并在存在时消耗空间的滚动条称为 经典滚动条 (classic scrollbars)。此类滚动条通常是不透明的。

无论使用的是 经典滚动条 还是 覆盖滚动条，滚动条的外观和大小，以及滚动条是出现在盒子的起始边缘还是结束边缘，均由 UA 定义。

注意：滚动条出现在哪一侧可能取决于操作系统约定、双向性 (bidirectionality) 或其他人体工程学考虑。

在 经典滚动条 的情况下，滚动条槽 的宽度（如果存在，请参见下文）与滚动条的宽度相同。在 覆盖滚动条 的情况下，不存在 滚动条槽。

注意：存在已知的用例可以通过为 覆盖滚动条 启用 滚动条槽 来解决，但目前尚未就令人满意的设计达成一致。这可以通过本属性的未来扩展来解决。请参阅 CSS 溢出 4 § B scrollbar-gutter 的可能扩展。

此属性的值具有以下含义：

auto

当 overflow 为 scroll，或者当 overflow 为 auto 且盒子正在溢出时，经典滚动条 通过创建 滚动条槽 来消耗空间。覆盖滚动条 不消耗空间。

稳定 (stable)

当 overflow 为 hidden、scroll 或 auto 时，无论盒子是否确实在溢出，经典滚动条 的 滚动条槽 都会存在。覆盖滚动条 不消耗空间。

注意：这不会改变滚动条本身是否可见，只有槽的存在受到影响。

both-edges（两个边缘）

如果在盒子的行内起始边缘或行内结束边缘上存在 滚动条槽，则另一个 滚动条槽 也必须存在于相对的边缘上。

当 滚动条槽 存在但滚动条不存在，或者滚动条是透明的或未完全遮盖 滚动条槽 时，滚动条槽 的背景必须作为内边距的延伸来绘制。

对于 overflow 属性，当 scrollbar-gutter 设置在根元素上时，用户代理必须改为将其应用于视口，而根元素自身的使用值为 scrollbar-gutter: auto。然而，与 overflow 属性不同，用户代理不得将 scrollbar-gutter 从 HTML body 元素传播出去。

5. 自动省略号

5.1. 溢出省略号：text-overflow 属性

此属性指定当行内内容在其行内容器元素（“块”）的行内进展方向上溢出其 末端 (end) 行框边缘时，且该块具有非 visible 的 overflow 属性时的渲染方式。

文本溢出的情况例如：当文本被阻止换行时（例如由于 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 值剪裁行上中性字符相同的一侧）。

用户与省略号的交互

• 当用户与内容交互（例如编辑、选择、滚动）时，用户代理可以将 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 (方向)。例如，一个溢出隐藏的从右到左 (direction: rtl) 的块会在 左侧 裁剪行内内容，因此会将文本溢出省略号放置在 左侧 以表示该被裁剪的内容。

省略号与滚动接口的交互

本节适用于非 text-overflow:clip（非剪裁式 text-overflow）且具有 overflow:scroll 的元素。

当具有非剪裁式 text-overflow 的元素在文本的行内进阶维度上具有滚动溢出，并且浏览器提供了滚动机制（例如元素上的滚动条，或触控界面的滑动滚动等）时，存在一些提供更好用户体验的额外实现细节。

当元素被滚动时（例如由用户操作或 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>

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

附录 A. 隐私考虑

本规范不引入任何新的隐私问题。

附录 B. 安全考虑

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

附录 C. 变更

本附录是信息性的。

自 2023 年 3 月 29 日工作草案 以来的重大变更

• 定义 overflow: hidden 在 替换元素 上被视为 overflow: clip。 (Issue 7714)

• 重新定义溢出内容分布与滚动容器之间的交互，使其不影响布局，而仅影响可滚动溢出区域的范围。（问题 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 社区成员提供的反馈。