CSS - 内容越界处理 ¶

• 作者：KK

• 发表日期：2016.1.30

隐藏越界的内容 ¶

属性和值:overflow:hidden;

这是当内容超出一个区域宽高的时候的处理措施--隐藏掉,例子:

<div style="width:200px; height:100px; background:red; overflow:hidden;">
	外面的DIV
	<div style="width:1000px; height:50px; background:yellow;">
		里面的DIV:从前有个人叫小明,他终日无所是事,专找小红玩,可是小红..
	</div>
</div>

里面的DIV文字太长,但由于外面的div只有200像素宽度,所以里面的也超不出这个宽度,一旦碰到这个宽度界线就开始被切断了

超出宽度显示横向滚动条 ¶

属性和值overflow-x:scroll;

当内容太长,但容器又不够宽度,你想让用户能看到全部内容的话就要显示横向滚动条来让他拉动查看了,例子:

<div style="width:200px; height:100px; background:red; overflow-x:scroll;">
	外面的DIV
	<div style="width:1000px; height:50px; background:yellow;">
		里面的DIV:从前有个人叫小明,他终日无所是事,专找小红玩,可是小..
	</div>
</div>

超出宽度显示纵向滚动条 ¶

属性和值overflow-y:scroll;

道理和横向滚动条是一样的,例子:

<div style="width:200px; height:100px; background:red; overflow-y:scroll;">
	从前有个人叫小明,他终日无所是事,专找小红玩,可是小红不喜欢跟他玩,于是他就死缠烂打,最后得到了小红的芳心!他们相亲相爱,成为了客喻户晓的人物,所以我们从小就知道有小明和小红这两个人.我们也要对喜欢的妹子死缠烂打,才能成为家喻户晓的人
</div>

另外设置overflow:scroll;则可以实现超出区域显示横纵滚动条,因为其实就是属性名称里不指定x或y方向即可,但这种用法是非常非常少的,我就不讲解了