定义
overflow属性规定当内容溢出元素框时该如何处理。
属性可能的取值
值 | 描述 |
---|---|
visible | 默认值 内容不会被修剪,会呈现在元素框之外 |
hidden | 内容会被修剪,并且其余内容不可见 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容 |
inherit | 规定应该从父元素继承overflow属性的值 |
1.overflow:visible(默认值)
<style>
div{
width: 150px;
height: 100px;
background: YELLOW;
overflow: visible;
}
</style>
<body>
<p>如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。
</p>
<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 visible,内容不会被修剪,会呈现在元素框之外。
</div>
</body>
2.overflow:hidden
<style>
div{
width: 150px;
height: 100px;
background: YELLOW;
overflow: hidden;
}
</style>
<body>
<p>如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。
</p>
<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 hidden,内容不会被修剪,会呈现在元素框之外。
</div>
</body>
3.overflow:scroll
<style>
div{
width: 150px;
height: 200px;
background: YELLOW;
overflow: scroll;
}
</style>
<body>
<p>如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。
</p>
<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。
</div>
</body>
4.overflow:auto
<style>
div{
width: 150px;
height: 100px;
background: YELLOW;
overflow: auto;
}
</style>
<body>
<p>如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。
</p>
<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 auto,如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
</div>
</body>
内容超出给定宽高会显示滚动条
内容没有超出给定的宽高则不显示滚动条
5.overflow:inherit
<style>
div.on{
overflow: scroll;
}
div.in{
width: 150px;
height: 100px;
background: YELLOW;
overflow: inherit;
}
</style>
<body>
<p>如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。
</p>
<div class='on'>
<div class='in'>
如果值为inherit,规定应该从父元素继承 overflow 属性的值。
</div>
</div>
</body>
JavaScript语法:
Object.style.overflow = “visible/hidden/scroll/auto/inherit”;
不显示滚动条但有滚动效果的实现:
<style>
div{
width: 150px;
height: 100px;
background: YELLOW;
overflow: scroll;
}
div::-webkit-scrollbar{
display: none;
}
</style>
<body>
<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。
</div>
</body>
鼠标放在显示的文本区域,能够实现文本的滚动效果