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 with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clip |
| 动画类型 | 离散值 |
形式语法
overflow-inline =
visible |
hidden |
clip |
scroll |
auto
示例
设置行向溢出行为
HTML
html
<ul> <li> <code>overflow-inline:hidden</code>——在盒外隐藏文本 <div id="div1">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div> </li> <li> <code>overflow-block:scroll</code>——总是添加滚动条 <div id="div2">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div> </li> <li> <code>overflow-block:visible</code>——按需在盒外显示文本 <div id="div3">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div> </li> <li> <code>overflow-block:auto</code>——在多数浏览器上等价于 <code>scroll</code> <div id="div4">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 |
浏览器兼容性
Loading…