css overflow属性设置内容溢出部分如果显示

原创 国哥笔记  2019-03-05 13:42  阅读 378 views 次

overflow属性定义及用法

在css中,overflow属性是使用来设置内容溢出元素的框会发生什么。

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

overflow属性语法格式

  1. css语法:overflow:visible/hidden/scroll/auto/inherit;
  2. JavaScript语法:object.style.overflow="scroll";

属性值说明

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

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css overflow属性设置内容溢出部分如果显示</title>
<style type="text/css">
div{width:300px;height:60px;border:1px solid #000;margin-top:15px;}
#div1{overflow:visible;}
#div2{overflow:hidden;}
#div3{overflow:scroll;}
</style>
</head>
<body>
<div id="div1">visible:内容不会被修剪,会呈现在元素框之外(默认)。内容不会被修剪,
会呈现在元素框之外。内容不会被修剪,会呈现在元素框之外</div>
<div id="div2">hidden:内容会被修剪,并且其余内容是不可见的。内容会被修剪,
并且其余内容是不可见的。内容会被修剪,并且其余内容是不可见的</div>
<div id="div3">scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容</div>
</body>
</html>

运行结果:

css overflow属性设置内容溢出部分如果显示

更多css属性请移步到——>css属性大全

非常相关
本文地址:https://www.ggbiji.com/css-overflow.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情