在html5静态网页开发中，当容器内的内容尺寸超过容器本身的宽高限制时，就会出现内容溢出的情况，此时需要通过添加滚动条或者调整溢出规则来让内容正常显示，避免布局错乱。
滚动条添加的核心属性：overflow
html5中控制内容溢出和滚动条显示的核心属性是overflow，它有三个常用取值，分别对应不同的滚动条显示规则：
- overflow: visible：默认值，内容溢出容器时会直接显示在容器外部，不会添加滚动条
- overflow: hidden：溢出内容会被隐藏，不会显示也不会添加滚动条
- overflow: scroll：无论内容是否溢出，容器都会显示横向和纵向的滚动条，溢出时可滚动查看
- overflow: auto：内容未溢出时不显示滚动条，内容溢出时自动显示对应方向的滚动条，是最常用的取值
如果需要单独控制横向或纵向的溢出规则，可以使用overflow-x和overflow-y属性，取值和overflow一致。
不同场景的滚动条添加示例
场景1：整个页面添加滚动条
如果整个静态网页的内容高度超过浏览器视口高度，默认就会自动出现纵向滚动条，不需要额外设置。如果需要强制显示滚动条，可以给body标签设置overflow: scroll：
/* 强制整个页面显示滚动条 */
body {
overflow: scroll;
margin: 0;
padding: 20px;
}
场景2：固定尺寸的容器内添加滚动条
当给某个容器设置了固定的宽高，内部内容溢出时，可以通过设置overflow: auto来自动添加滚动条：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>容器内滚动条示例</title>
<style>
.content-box {
width: 300px;
height: 200px;
border: 1px solid #ccc;
/* 内容溢出时自动显示滚动条 */
overflow: auto;
padding: 10px;
}
</style>
</head>
<body>
<div class="content-box">
<p>这是一段测试内容，当这段内容的高度超过容器的200px高度时，就会自动出现纵向滚动条。</p>
<p>可以继续添加更多内容来测试溢出效果，比如多复制几段文字，就能看到滚动条的作用。</p>
<p>更多测试内容，更多测试内容，更多测试内容，更多测试内容。</p>
<p>更多测试内容，更多测试内容，更多测试内容，更多测试内容。</p>
<p>更多测试内容，更多测试内容，更多测试内容，更多测试内容。</p>
</div>
</body>
</html>
场景3：只显示横向或纵向滚动条
如果只需要显示纵向滚动条，不需要横向滚动条，可以单独设置overflow-y: auto，overflow-x: hidden：
/* 只显示纵向滚动条 */
.vertical-scroll-box {
width: 400px;
height: 250px;
overflow-y: auto;
overflow-x: hidden;
border: 1px solid #eee;
}
内容溢出的其他处理办法
除了添加滚动条之外，还可以通过其他方式处理内容溢出问题：
办法1：文本截断显示省略号
如果是单行文本溢出，可以通过text-overflow: ellipsis让溢出部分显示省略号，需要配合white-space: nowrap和overflow: hidden使用：
.single-line-ellipsis {
width: 200px;
/* 不换行 */
white-space: nowrap;
/* 溢出隐藏 */
overflow: hidden;
/* 溢出部分显示省略号 */
text-overflow: ellipsis;
border: 1px solid #ddd;
padding: 5px;
}
如果是多行文本溢出，可以通过-webkit-line-clamp属性控制显示的行数，注意该属性主要适用于webkit内核浏览器：
.multi-line-ellipsis {
width: 200px;
/* 将元素设置为弹性盒模型 */
display: -webkit-box;
/* 设置垂直排列 */
-webkit-box-orient: vertical;
/* 控制显示的行数 */
-webkit-line-clamp: 3;
overflow: hidden;
border: 1px solid #ddd;
padding: 5px;
}
办法2：调整容器或内容尺寸
如果是内容溢出是临时情况，也可以通过调整容器的宽高，或者缩小内容的内边距、字体大小等方式，让内容适配容器，避免溢出。比如将固定高度的容器改为height: auto，让容器高度随内容自适应。
办法3：内容换行处理
对于长单词或者连续的数字导致的横向溢出，可以设置word-wrap: break-word或者word-break: break-all让内容自动换行，避免横向溢出：
.word-break-box {
width: 150px;
/* 允许单词内换行 */
word-break: break-all;
border: 1px solid #ccc;
padding: 10px;
}
常见问题说明
1. 为什么设置了overflow: auto还是没有滚动条？需要确认容器是否设置了固定的宽高，如果容器的宽高是自适应的，内容会撑开容器，不会出现溢出情况，自然也不会有滚动条。
2. 滚动条样式可以自定义吗？可以通过::-webkit-scrollbar相关伪元素自定义webkit内核浏览器的滚动条样式，但非webkit内核浏览器暂不支持自定义，属于兼容性受限的特性。
3. 移动端滚动条需要注意什么？移动端默认滚动条会比较细，部分浏览器会隐藏滚动条，只会在滚动时短暂显示，不需要额外处理，保持overflow: auto的默认表现即可。