本文主要是介绍JavaWeb学习之路(45)–CSS之溢出，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

点此查看全部文字教程、视频教程、源代码

本教程已配套视频教程，点此查看

本文目录

• 1. 前言
• 2. 默认显示溢出部分
• 3. 隐藏溢出部分
• 4. 显示滚动条
• 5. 自动处理
• 6. 小结

1. 前言

之前我们讲过了，网页元素会占据一个盒子的空间。如果我们通过width或者height设置了元素的尺寸，那么就确定了元素内容的大小。

如果此时，元素内容太多，超出了我们设置的尺寸，会是什么情况呢。

这就是本节课介绍的溢出，指的就是内容太多，超出元素尺寸的情况。

CSS提供了overflow属性设置溢出时元素的显示方式。

2. 默认显示溢出部分

如果我们不指定overflow，则overflow默认取值为visible，意思是溢出部分显示出来。例如：

	<div class="box overflow-visible">
        <h3>凉州词</h3>
        黄河远上白云间<br>
        一片孤城万仞山<br>
        羌笛何须怨杨柳<br>
        春风不度玉门关<br>
    </div>

对应CSS：

		.box {
            border: 1px solid blue;
            height: 100px;
        }
        .overflow-visible {
            overflow: visible;
        }

我们通过.box类为元素设置了边框和高度，通过.overflow-visible将元素溢出方式设置为visible，注意默认情况也是该溢出方式。此时效果如下：

可见溢出的部分也显示了出来。

3. 隐藏溢出部分

通过将overflow属性值设置为hidden，可以隐藏溢出部分。

	<div class="box overflow-hidden">
        <h3>凉州词</h3>
        黄河远上白云间<br>
        一片孤城万仞山<br>
        羌笛何须怨杨柳<br>
        春风不度玉门关<br>
    </div>

CSS：

 		.overflow-hidden {
            overflow: hidden;
        }

效果如下：

4. 显示滚动条

上面两种方式的处理，明显都不够好。第一种内容都跑出来了，第二种直接不让你看溢出的内容了。

我们可以通过将overflow属性值设置为scroll，从而显示滚动条以便查看溢出内容。

	<div class="box overflow-scroll">
        <h3>凉州词</h3>
        黄河远上白云间<br>
        一片孤城万仞山<br>
        羌笛何须怨杨柳<br>
        春风不度玉门关<br>
    </div>

CSS代码：

		.overflow-scroll {
            overflow: scroll;
        }

此时效果如下，拖动右侧滚动条即可查看溢出内容。

5. 自动处理

在上面的例子中，内容的宽度并未超过元素宽度，其实没必要显示横向滚动条。此时可以直接将overflow设置为auto，让浏览器自动处理去。

 	<div class="box overflow-auto">
        <h3>凉州词</h3>
        黄河远上白云间<br>
        一片孤城万仞山<br>
        羌笛何须怨杨柳<br>
        春风不度玉门关<br>
    </div>

CSS代码：

 		.overflow-auto {
            overflow: auto;
        }

在IE浏览器下，处理结果如下：

使用Chrome浏览器看看，效果如下：

这两种浏览器都足够智能，只显示了垂直滚动条，但是从样式上看，好像Chrome浏览器更好看一点。

6. 小结

综合上面的实例，设置auto效果最好。

这篇关于JavaWeb学习之路(45)–CSS之溢出的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！