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，则元素可能会更大或更小，以适合溢出内容的大小！