overflow-inline
基线 2025 *
新推出
overflow-inline CSS 属性设置当内容溢出框的行内起始和结束边缘时显示的内容。这可能不显示任何内容、显示滚动条或溢出内容。
注意： overflow-inline 属性根据文档的书写模式映射到 overflow-y 或 overflow-x。
语法
css
/* Keyword values */
overflow-inline: visible;
overflow-inline: hidden;
overflow-inline: clip;
overflow-inline: scroll;
overflow-inline: auto;
/* Global values */
overflow-inline: inherit;
overflow-inline: initial;
overflow-inline: revert;
overflow-inline: revert-layer;
overflow-inline: unset;
overflow-inline 属性被指定为单个 <overflow> 关键字值。
值
visible-
内容不会被裁剪，并且可能会呈现在内边距框的行内起始和结束边缘之外。
-
如有必要，内容会被裁剪以适应内边距框的行内尺寸。不提供滚动条。
clip-
溢出内容在元素的溢出裁剪边缘被裁剪，该边缘使用
overflow-clip-margin属性定义。 scroll-
如有必要，内容会被裁剪以适应内边距框的行内尺寸。无论内容是否实际被裁剪，浏览器都会显示滚动条。（这可以防止在内容更改时滚动条出现或消失。）打印机仍可能打印溢出内容。
auto-
取决于用户代理。如果内容适合内边距框，它看起来与
visible相同，但仍会建立新的块格式化上下文。如果内容溢出，桌面浏览器会提供滚动条。
正式定义
| 初始值 | auto |
|---|---|
| 应用于 | 块容器、伸缩容器和网格容器 |
| 继承性 | 否 |
| 计算值 | 按指定方式，但如果 overflow-x 或 overflow-y 中的一个既不是 visible 也不是 clip，则 visible/clip 分别计算为 auto/hidden |
| 动画类型 | 离散 |
正式语法
overflow-inline =
visible |
hidden |
clip |
scroll |
auto
示例
设置行内溢出行为
HTML
html
<ul>
<li>
<code>overflow-inline: hidden</code> (hides the text outside the box)
<div id="div1">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
<li>
<code>overflow-inline: scroll</code> (always adds a scrollbar)
<div id="div2">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
<li>
<code>overflow-inline: visible</code> (displays the text outside the box if
needed)
<div id="div3">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
<li>
<code>overflow-inline: auto</code> (equivalent to <code>scroll</code>
in most browsers)
<div id="div4">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
<li>
<code>overflow-inline: clip</code> (hides the text outside the box beyond
the overflow clip edge)
<code>clip</code>
<div id="div5">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
</ul>
CSS
css
div {
border: 1px solid black;
width: 250px;
margin-bottom: 12px;
}
#div1 {
overflow-inline: hidden;
}
#div2 {
overflow-inline: scroll;
}
#div3 {
overflow-inline: visible;
}
#div4 {
overflow-inline: auto;
}
#div5 {
overflow-inline: clip;
overflow-clip-margin: 2em;
}
结果
规范
| 规范 |
|---|
| CSS 溢出模块第 3 级 # 溢出控制 |
浏览器兼容性
加载中…