此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
overflow-inline
Baseline 2025 *Newly available
Since September 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
* Some parts of this feature may have varying levels of support.
CSS 属性overflow-inline 设置了当内容溢出盒的行首和行末侧时所显示的内容。可以不显示，或者显示滚动条或溢出内容。
备注：overflow-inline 属性根据文档的书写模式对应于overflow-y 或overflow-x。
语法
css
/* 关键词值 */overflow-inline: visible;overflow-inline: hidden;overflow-inline: scroll;overflow-inline: auto;/* 全局值 */overflow-inline: inherit;overflow-inline: initial;overflow-inline: revert;overflow-inline: revert-layer;overflow-inline: unset;overflow-inline 属性可指定为下列关键词之一。
取值
形式定义
| 初始值 | auto |
|---|---|
| 适用元素 | Block-containers, flex containers, and grid containers |
| 是否是继承属性 | 否 |
| 计算值 | as specified, except withvisible/clip computing toauto/hidden respectively if one ofoverflow-x oroverflow-y is neithervisible nor clip |
| 动画类型 | 离散值 |
形式语法
overflow-inline =
visible|
hidden|
clip|
scroll|
auto
示例
设置行向溢出行为
HTML
html
<ul> <li> <code>overflow-inline:hidden</code>——在盒外隐藏文本 <div>ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div> </li> <li> <code>overflow-block:scroll</code>——总是添加滚动条 <div>ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div> </li> <li> <code>overflow-block:visible</code>——按需在盒外显示文本 <div>ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div> </li> <li> <code>overflow-block:auto</code>——在多数浏览器上等价于 <code>scroll</code> <div>ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div> </li></ul>CSS
css
#div1,#div2,#div3,#div4 { 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;}结果
规范
| Specification |
|---|
| CSS Overflow Module Level 3 # overflow-control |