前端小伙伴们还搞不清楚css overflow的属性的各种用法吗？今天这篇文章总结了几种情况，一起来看下吧。
CSS中的overflow属性用于控制当内容溢出元素框时的行为。它有以下几个值，每个值都有其特定的用途和效果：
- visible: 默认值。内容不会被剪裁，会呈现在元素框之外。
- hidden: 内容会被剪裁，不会显示在元素框之外。
- scroll: 内容会被剪裁，但会提供滚动条以便查看被剪裁的内容。
- auto: 如果内容溢出，则提供滚动条；否则不提供。
详细解释
visible
- 描述: 内容不会被剪裁，会呈现在元素框之外。
- 示例:.example {
overflow: visible;
}
hidden
- 描述: 内容会被剪裁，不会显示在元素框之外。
- 示例:.example {
overflow: hidden;
}
scroll
- 描述: 内容会被剪裁，但会提供滚动条以便查看被剪裁的内容。无论内容是否溢出，都会显示滚动条。
- 示例:.example {
overflow: scroll;
}
auto
- 描述: 如果内容溢出，则提供滚动条；否则不提供。这是最常用的值，因为它根据需要动态地显示或隐藏滚动条。
- 示例:.example {
overflow: auto;
}
水平和垂直方向的单独控制
你也可以分别控制水平和垂直方向的溢出行为：
- overflow-x: 控制水平方向的溢出行为。
- overflow-y: 控制垂直方向的溢出行为。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Overflow Example</title>
<style>
.container {
width: 200px;
height: 100px;
border: 1px solid black;
margin-bottom: 20px;
}
.visible {
overflow: visible;
}
.hidden {
overflow: hidden;
}
.scroll {
overflow: scroll;
}
.auto {
overflow: auto;
}
.horizontal-scroll {
overflow-x: scroll;
}
.vertical-scroll {
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="container visible">
This is a long text that will overflow the container box. The overflow property is set to 'visible'.
</div>
<div class="container hidden">
This is a long text that will overflow the container box. The overflow property is set to 'hidden'.
</div>
<div class="container scroll">
This is a long text that will overflow the container box. The overflow property is set to 'scroll'.
</div>
<div class="container auto">
This is a long text that will overflow the container box. The overflow property is set to 'auto'.
</div>
<div class="container horizontal-scroll">
This is a long text that will overflow the container box horizontally. The overflow-x property is set to 'scroll'.
</div>
<div class="container vertical-scroll">
This is a long text that will overflow the container box vertically. The overflow-y property is set to 'scroll'.
</div>
</body>
</html>
创作不易，如果这篇文章对你有用，欢迎点赞关注加评论哦。