CSS overflow-x 属性
当一个块级元素的内容在水平方向发生溢出时，CSS overflow-x 属性决定应该截断溢出内容，或者显示滚动条，或者直接显示溢出内容。
实例
裁剪 div 元素中内容的左/右边缘 - 如果溢出元素的内容区域的话：
<!DOCTYPE html><html><head><style>div{width:110px;height:110px;border:thin solid black;overflow-x:hidden;overflow-y:hidden;}</style></head><body><div><p style="width:140px">这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p></div><p>Overflow-x 是否对内容的左/右边缘进行裁剪。</p><p>Overflow-y 是否对内容的上/下边缘进行裁剪。</p></body></html>
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
带 -ms- 的数字表示使用前缀的首个版本。
| 属性 | |||||
|---|---|---|---|---|---|
| overflow-x | 4.0 | 9.08.0 -ms- | 3.5 | 3.0 | 9.5 |
定义和用法
overflow-x 属性规定是否对内容的左/右边缘进行裁剪 - 如果溢出元素内容区域的话。
提示：使用 overflow-y 属性来确定对上/下边缘的裁剪。
| 默认值： | visible |
|---|---|
| 继承性： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.overflowX="scroll" |
语法
overflow-x: visible|hidden|scroll|auto|no-display|no-content;
| 值 | 描述 | 测试 |
|---|---|---|
| visible | 不裁剪内容，可能会显示在内容框之外。 | 测试 |
| hidden | 裁剪内容 - 不提供滚动机制。 | 测试 |
| scroll | 裁剪内容 - 提供滚动机制。 | 测试 |
| auto | 如果溢出框，则应该提供滚动机制。 | 测试 |
| no-display | 如果内容不适合内容框，则删除整个框。 | 测试 |
| no-content | 如果内容不适合内容框，则隐藏整个内容。 | 测试 |