前端小伙伴们还搞不清楚css overflow的属性的各种用法吗？今天这篇文章总结了几种情况，一起来看下吧。

CSS中的overflow属性用于控制当内容溢出元素框时的行为。它有以下几个值，每个值都有其特定的用途和效果：

1. visible: 默认值。内容不会被剪裁，会呈现在元素框之外。
2. hidden: 内容会被剪裁，不会显示在元素框之外。
3. scroll: 内容会被剪裁，但会提供滚动条以便查看被剪裁的内容。
4. auto: 如果内容溢出，则提供滚动条；否则不提供。

详细解释

visible

• 描述: 内容不会被剪裁，会呈现在元素框之外。
• 示例:.example {
  overflow: visible;
  }

hidden

• 描述: 内容会被剪裁，不会显示在元素框之外。
• 示例:.example {
  overflow: hidden;
  }

scroll

• 描述: 内容会被剪裁，但会提供滚动条以便查看被剪裁的内容。无论内容是否溢出，都会显示滚动条。
• 示例:.example {
  overflow: scroll;
  }

auto

• 描述: 如果内容溢出，则提供滚动条；否则不提供。这是最常用的值，因为它根据需要动态地显示或隐藏滚动条。
• 示例:.example {
  overflow: auto;
  }

水平和垂直方向的单独控制

你也可以分别控制水平和垂直方向的溢出行为：

• overflow-x: 控制水平方向的溢出行为。
• overflow-y: 控制垂直方向的溢出行为。

示例代码

    
    
    
    


    

        This is a long text that will overflow the container box. The overflow property is set to 'visible'.
    
    

        This is a long text that will overflow the container box. The overflow property is set to 'hidden'.
    
    

        This is a long text that will overflow the container box. The overflow property is set to 'scroll'.
    
    

        This is a long text that will overflow the container box. The overflow property is set to 'auto'.
    
    

        This is a long text that will overflow the container box horizontally. The overflow-x property is set to 'scroll'.
    
    

        This is a long text that will overflow the container box vertically. The overflow-y property is set to 'scroll'.
    

创作不易，如果这篇文章对你有用，欢迎点赞关注加评论哦。