前端技巧设置内容溢出内容区域的表现(overflow属性)

设置内容溢出内容区域的表现(overflow属性)

在CSS中使用overflow属性来定义内容溢出内容区域(元素框)时的表现样式,例如是否对内容的边缘进行裁剪等,是否出现滚动条等。overflow属性默认值是visible,意思是如果不设置overflow属性,则内容溢出元素框时会出现在元素框之外,例如我定义一个元素框:

#wrap {width:350px;height:300px;border:10px solid #999;padding:10px;}

我将一张尺寸大于这个元素框的图片放入该元素框,则产生的效果是:

overflow1.png

这张图片跑到元素框外面了,而overflow的其他属性值可以定义相应的其他效果,overflow可定义的值如下:

#wrap {overflow:hidden;}

表示内容会被修剪,超过元素框的部分被隐藏,如下图:

overflow溢出隐藏.png

#wrap {overflow:scroll;}

浏览器会显示滚动条,拖动滚动条可查看完整的内容;

#wrap {overflow:auto;}

如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容,如下图:

overflow溢出出现滚动条.png

当内容的尺寸大于元素框的时候,overflow:scrolloverflow:auto这两个定义都会出现滚动条,这两个值的区别在于,overflow:scroll表示一直存在滚动条,即使内容尺寸没有超过元素框,而auto顾名思义是超过后才出现滚动条。

如下图,当定义了overflow:scroll后,始终留有滚动条的位置:

overflow滚动条.png

后来在overflow属性延伸出的两个带有横轴和纵轴的属性,overflow-x用来定义对水平方向内容溢出的处理,而overflow-y主要用来定义对竖直方向内容溢出的处理。

这两个带横轴和纵轴的属性,如果只设置其中的一个非默认值,则另一个会默认为auto,例如:

#wrap {overflow-x:hidden;overflow-y:visible;}

这里设置了水平方向溢出隐藏,而竖直方向即使设置了默认值,它还是会出现竖直方向的滚动条。


有些时候父元素因为子元素设置了浮动而产生塌陷的问题,使用overflow:hidden这个定义可以用于给元素框清除浮动,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
body {margin:50px;}
#wrap {width:500px;border:10px solid #999;}
.box {background:#FF949D;float:left;
width:150px;height:200px;margin:5px;}
</style>
</head>
<body>
<div id="wrap">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
</body>
</html>

这里没有给wrap外层元素框定义高度,当子元素未定义浮动的时候,外层框会根据子元素的高度自动调整高度,当子元素设置浮动后,外层框则无法包裹这三个子元素,产生了塌陷,这时候只需要做清除浮动的处理即可恢复正常,而清除浮动的方法有很多,其中一种就是给外层框加上overflow:hidden定义,也就是:

#wrap {overflow:hidden}

加上这个定义之后便恢复正常的显示了,至于为什么它有清除浮动的效果,请了解关于BFC的概念,事实上,设置overflow:autooverflow:scroll也具有清除浮动效果。


此外,overflow:hidden还有一个比较常用的用处,配合text-overflow:ellipsis属性来设置文本过长时以省略号显示,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
body {margin:50px;}
#wrap {width:300px;}
</style>
</head>
<body>
<div id="wrap">
<p>英国,又称联合王国,本土位于欧洲大陆西北面的不列颠群岛。</p>
</div>
</body>
</html>

这里我设置了外层框的宽度为300px,此时文本超过该宽度会换行显示:

长文本超出宽度.png

如果给p标签设置不换行,则文本会在一行内显示,超出外框的宽度:

p {white-space: nowrap;}

不想让文本超出外框的宽度,则需要给p标签设置溢出隐藏,也就是:

p {white-space: nowrap;overflow:hidden;}

此时超出外框宽度的文本部分被隐藏了,接着设置隐藏的部分以省略号显示,即:

p {white-space: nowrap;overflow:hidden;text-overflow:ellipsis;}

经过这些设置,文本过长的部分则以省略号显示:

长文本超出宽度显示省略号.png

这样的做法经常用于网站的单行标题列表。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/skill/70.html