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

CSS实现内容超出出现滚动条内容超出容器的宽度或高度时，元素会溢出，如何解决这个问题？这时可以通过CSS来控制它，让内容不再溢出，并且出现滚动条。可以通过设置 overflow 属性来实现：overf...

CSS实现内容超出出现滚动条
内容超出容器的宽度或高度时，元素会溢出，如何解决这个问题？这时可以通过CSS来控制它，让内容不再溢出，并且出现滚动条。
可以通过设置 overflow 属性来实现：
overflow: visible | hidden | scroll | auto;
- visible：默认值，不裁剪内容，超出部分会显示在元素框外面。
- hidden：隐藏超出元素框的部分。
- scroll：显示滚动条，即不管有没有超出都显示滚动条。
- auto：浏览器自动选择是否显示滚动条。
例如，以下代码就可以让一个元素出现滚动条：

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

只要元素中的内容超出了容器的尺寸，就会出现滚动条。
此外，我们还可以通过 overflow-x 和 overflow-y 来控制水平和垂直方向上的滚动条出现，代码分别如下：

div {
    overflow-x: auto;
    overflow-y: hidden;
} 

掌握了这些基础知识，就可以让我们更好地控制元素的内容，让页面显示更加美观可控。