欢迎光临
我们一直在努力

CSS | 内容溢出处理(overflow)

实例操作

设置 overflow 属性为scroll,让div增加一个滚动条,可以查看多出来的内容:

div
  {
  width:150px;
  height:150px;
  overflow:scroll;
  }

浏览器支持

所有主流浏览器都支持 overflow 属性。

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

定义和用法

overflow 属性规定当内容溢出元素框时发生的事情。

注意:这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。

可能的值

描述
visible默认值。内容不会被修剪,会呈现在元素框之外。
hidden内容会被修剪,并且其余内容是不可见的。
scroll内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit规定应该从父元素继承 overflow 属性的值。

备注:如果你不确定是否内容会溢出,想做出“如果溢出,添加滚动条,如果不溢出,则不出现滚动条”的效果,可以使用overflow: auto;

赞(1) 打赏
未经允许不得转载:散人研 » CSS | 内容溢出处理(overflow)
分享到: 更多 (0)

评论 抢沙发

7 + 8 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏