overflow-inline
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 |
动画类型 | 离散值 |
形式语法
示例
设置行向溢出行为
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 |
浏览器兼容性
BCD tables only load in the browser