CSS 中的溢出

当元素的内容超出其容器大小时，我们说它溢出了。通过 CSS 的溢出属性，我们可以控制溢出内容的表现方式。

溢出属性

CSS 中有以下几个溢出属性：

• overflow-x：水平方向上的溢出控制
• overflow-y：垂直方向上的溢出控制
• overflow：同时控制水平和垂直方向上的溢出

可选值

对于 overflow-x 和 overflow-y，可选的值有：

• visible：默认值，溢出部分显示在容器外部
• hidden：溢出部分被裁剪掉，不可见
• scroll：溢出部分被裁剪掉，但显示出一个用于滚动内容的滚动条，不论是否需要滚动条
• auto：溢出部分被裁剪掉，只有在需要滚动时才显示滚动条

同样地，对于 overflow，可选的值也是以上四种。

示例

/* 水平溢出部分被裁剪掉，滚动条在需要时显示 */
overflow-x: scroll;

/* 垂直溢出部分被裁剪掉，不可见 */
overflow-y: hidden;

/* 溢出部分被裁剪掉，同时显示水平和垂直方向上的滚动条 */
overflow: scroll;

注意事项

请注意，溢出属性只对有固定尺寸的容器元素有效，对于非固定尺寸的容器元素，溢出属性不起作用。

另外，当子元素的尺寸比容器元素更大时，容器元素会自动将尺寸调整为与子元素相等，而不是发生溢出。

总结

通过 CSS 中的溢出属性，我们可以控制元素的溢出内容的表现方式，常用的控制方式包括隐藏和滚动显示。在实际开发中，我们根据具体需求选择不同的溢出属性值即可。