样式中的 overflow 属性如何使用

最新推荐文章于 2024-08-20 09:00:00 发布

原创

最新推荐文章于 2024-08-20 09:00:00 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

当HTML元素内容超出设定的宽度或高度时，`overflow`属性用于控制超出部分的处理方式。`overflow: hidden`可以隐藏超出的内容，常用于页面设计；而`overflow: auto`则会在需要时显示滚动条，适用于数据过多的情况。

overflow 中文意思是“溢出”，在html中意思也是如此。讲讲该怎么使用，在某个元素中包含了很多的行内容，而对这个元素设定了指定的宽度和高度，在查看效果的时，你就会发现内容过多就会导致在这个元素指定的高度下内容会超出。比如元素高度设置了 300px，而元素所包含的内容高度就不只300px ，会超出所设定的这个范围，那么该如何设置呢，看实例，贴上一段html代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #file-content {
            width: 40%;
            height: 100%;
            min-height: 42px;
            max-height: 290px;
            padding: 0 .9em;
            border: solid 1px #ddd;
            background-color: #fdfdfd;
        }
    </style>
</head>
<body>
<div id="file-content">
    <ul id="dir-file">
        <li>
            <span>aa</span>
            <ul>
                <li>aaa</li>
                <li>aaa</li>
                <li>aaa</li>
            </ul>
        </li>