JavaWeb学习之路(45)–CSS之溢出

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

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

本文目录

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,注意默认情况也是该溢出方式。此时效果如下:
JavaWeb学习之路(45)–CSS之溢出
可见溢出的部分也显示了出来。

3. 隐藏溢出部分

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

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

CSS:

 		.overflow-hidden {
            overflow: hidden;
        }

效果如下:
JavaWeb学习之路(45)–CSS之溢出

4. 显示滚动条

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

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

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

CSS代码:

		.overflow-scroll {
            overflow: scroll;
        }

此时效果如下,拖动右侧滚动条即可查看溢出内容。
JavaWeb学习之路(45)–CSS之溢出

5. 自动处理

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

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

CSS代码:

 		.overflow-auto {
            overflow: auto;
        }

在IE浏览器下,处理结果如下:
JavaWeb学习之路(45)–CSS之溢出
使用Chrome浏览器看看,效果如下:
JavaWeb学习之路(45)–CSS之溢出
这两种浏览器都足够智能,只显示了垂直滚动条,但是从样式上看,好像Chrome浏览器更好看一点。

6. 小结

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

上一篇:element-ui中el-dialog的v-model不能绑定数据的问题


下一篇:JQuery属性,动画效果,:hidden和:visible