CSS3 overflow-x 属性
CSS3 overflow-x 属性
概述
CSS3 overflow-x 属性指定元素在水平方向上溢出内容的处理方式。它影响到元素的滚动条。
- overflow-x:auto
当元素中的内容超出容器的宽度时,自动提供溢出修剪,但仅在需要时提供滚动条。
- overflow-x:hidden
当元素中的内容超出容器的宽度时,隐藏溢出的内容。
- overflow-x:scroll
当元素中的内容超出容器的宽度时,将提供滚动条,以便可以在水平方向上滚动此内容。
- overflow-x:visible
即使仅在容器内容区域之外的内容或盒子边缘之外的内容也可见。
语法
overflow-x: visible|hidden|scroll|auto|initial|inherit;
- visible:默认值。内容在容器外也可见。
- hidden:内容溢出的部分被隐藏。
- scroll:当内容溢出容器时提供滚动条。
- auto:当内容溢出时提供滚动条(如果需要)。
- initial:设置属性为它的默认值。
- inherit:从父元素继承属性的值。
取值说明
- visible:内容不剪切,允许它移到容器边缘之外。
- hidden:影藏超出的内容。
- scroll:无论内容是否溢出,始终提供水平滚动条。
- auto:仅在必要时提供水平滚动条。
- initial:设置属性为它的默认值。
- inherit:从父元素继承属性的值。
实例
div{
width:300px;
height:200px;
overflow:hidden;
border: 1px solid red;
white-space: nowrap;
}
- 设置div区域宽度300px,高度200px。
- 设置溢出时隐藏内容。
- 设置边框样式为1像素的红色实线。
- 设置文本不换行。
备注
- 如果元素的 overflow 属性设置为 visible,那么 overflow-x 属性不起作用。
- 如果元素的 overflow-x 和 overflow-y 属性都设置为隐藏,只有当两个方向都溢出才会裁剪。如果仅在某个方向有溢出,元素将非剪裁的溢出内容呈现给用户。
- 如果元素的 overflow-x 和 overflow-y 属性都设置为 visible,则元素可能会更大或更小,以适合溢出内容的大小!