CSS3 overflow-x 左右溢出
CSS3 overflow-x 内容溢出是否左/右边缘裁剪
语法：
overflow-x : visible | auto | hidden | scroll
参数：
- visible : 不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的宽度。并且clip属性设置将失效
- auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
- hidden : 不显示超过对象宽度的内容
- scroll : 总是显示横向滚动条
说明：
检索或设置当对象的内容超过其指定宽度时如何管理内容。
参阅overflow属性。
对应的脚本特性为 overflowX 。
实例
裁剪 div 元素中内容的左/右边缘 - 如果溢出元素的内容区域的话：
- div
- {
- overflow-x:hidden;
- }
示例：
- body { overflow-x: hidden; }
- div { overflow-x: scroll; height: 100px; width: 100px; }
扩展阅读：
浏览器支持
| IE | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|
所有主流浏览器都支持 overflow-x 属性。
注释：任何版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
定义和用法
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 | 如果内容不适合内容框，则隐藏整个内容。 |
正文到此结束
热门推荐
相关文章
近期评论
-
你这基本没有更新呀，最近文章显示还是2019年的文章。不符合要求哈
-
关键词：慕云博客 链接：https://www.lilun.me 描述：分享原创文字的个人博客
-
-
-
可以提供一下源码吗
-
不是商业站，鸡娃学习笔记
-
-
-
-
听他们说很厉害的样子
Loading...
![[HBLOG]公众号](http://www.liuhaihua.cn/img/qrcode_gzh.jpg)
