1. 为什么需要超出显示滚动条
在开发Web页面时，通常会遇到内容过长的情况。如果使用固定高度，文本超出部分会被裁剪。为了避免这种情况，我们需要使用CSS超出显示滚动条的方法，让内容得以全部展示。
超出显示滚动条的方法有很多种，我们来逐一了解。
2. overflow属性
overflow属性指定了当元素的内容超出其框架时发生的事情。例如，将overflow属性设置为scroll或auto可以在需要时为元素提供滚动条。
2.1 auto
当内容超出元素大小时，浏览器会自动为元素添加滚动条。
#box {
width: 200px;
height: 100px;
overflow: auto;
}
代码解释：
上述代码中，box的宽度为200px，高度为100px。当box内的内容超出盒子高度时，浏览器会自动为box添加滚动条。
2.2 scroll
与auto相似，但即使内容未超出元素大小，滚动条也将始终显示。
#box {
width: 200px;
height: 100px;
overflow: scroll;
}
代码解释：
上述代码中，box的宽度为200px，高度为100px。无论box的内容是否超出盒子高度，浏览器始终会为box添加滚动条。
3. 水平滚动条
在实际开发中，有时候我们需要给内容超出盒子宽度的元素添加水平滚动条。overflow-x属性用于控制元素在水平方向上是否显示滚动条。
3.1 overflow-x: auto
自动添加水平滚动条
#box {
width: 200px;
height: 100px;
overflow-x: auto;
}
代码解释：
上述代码中，box的宽度为200px，高度为100px。当box内的内容超出盒子宽度时，浏览器会自动为box添加水平滚动条。
3.2 overflow-x: scroll
即使内容未超出盒子宽度，始终显示水平滚动条。
#box {
width: 200px;
height: 100px;
overflow-x: scroll;
}
代码解释：
上述代码中，box的宽度为200px，高度为100px。无论box的内容是否超出盒子宽度，浏览器始终会为box添加水平滚动条。
4. 垂直滚动条
当内容超出盒子高度时，自动添加垂直滚动条。overflow-y属性用于控制元素垂直方向上是否显示滚动条。
4.1 overflow-y: auto
当内容超出盒子高度时自动添加垂直滚动条。
#box {
width: 200px;
height: 100px;
overflow-y: auto;
}
代码解释：
上述代码中，box的宽度为200px，高度为100px。当box内的内容超出盒子高度时，浏览器会自动为box添加垂直滚动条。
4.2 overflow-y: scroll
即使内容未超出盒子高度，始终显示垂直滚动条。
#box {
width: 200px;
height: 100px;
overflow-y: scroll;
}
代码解释：
上述代码中，box的宽度为200px，高度为100px。无论box的内容是否超出盒子高度，浏览器始终会为box添加垂直滚动条。
5. 总结
本文介绍了CSS中超出显示滚动条的方法。除了常用的overflow属性外，还介绍了overflow-x和overflow-y属性用于控制元素水平方向和垂直方向上的滚动条。使用这些属性可以很轻松地给网页添加滚动条，并提升网页的可视性。