[分享]css内容超出隐藏出现滚动条

CSS中内容超出了容器的情况下，可以通过设置overflow属性来控制是否出现滚动条。当我们需要隐藏超出的内容时，可以使用overflow:hidden来实现。 例如，下面的代码中，我们将一个固定宽度...

CSS中内容超出了容器的情况下，可以通过设置overflow属性来控制是否出现滚动条。当我们需要隐藏超出的内容时，可以使用overflow:hidden来实现。

例如，下面的代码中，我们将一个固定宽度和高度的容器div中的内容超出部分隐藏起来：

div{
  width: 200px;
  height: 100px;
  overflow: hidden;
} 

当容器中的内容超出了200px和100px的宽度和高度时，超出部分就会被隐藏掉，并不会出现滚动条。

如果我们希望出现滚动条，可以使用overflow:auto或overflow:scroll属性。其中，overflow:auto会在需要的时候自动显示滚动条，而overflow:scroll则会一直显示滚动条，不管是否需要。

例如，下面的代码中，我们将容器中的内容超出部分出现滚动条：

div{
  width: 200px;
  height: 100px;
  overflow: auto;
} 

当容器中的内容超出了200px和100px的宽度和高度时，会自动出现滚动条进行滚动。

除此之外，我们也可以只设置overflow-x或overflow-y来单独控制水平方向或垂直方向的滚动条。

总之，CSS中超出部分的处理是很实用的技巧，灵活运用可以帮助我们更好地布局和展示页面。