overflow:hidden妙用

最新推荐文章于 2023-04-25 16:57:37 发布

阿大的冰棒

最新推荐文章于 2023-04-25 16:57:37 发布

阅读量289

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_53582888/article/details/127778872

版权

1、首先最基础的用法是，隐藏溢出的内容

<style>
        .text{
            width: 150px;
            height: 60px;
            background-color: skyblue;
            /* 溢出隐藏 */
            overflow: hidden;
            /* 文本不换行 */
            /* white-space: nowrap; */
            /* 隐藏部分用省略号表示 */
            /* text-overflow: ellipsis; */
        }
        

    </style>
</head>
<body>
    <div class="text">
        我是一长串文字<br>
        我是一长串文字<br>
        我是一长串文字<br>
        我是一长串文字
    </div>

有些属性只适用于单行文本

            /* 溢出隐藏 */
            overflow: hidden;
            /* 文本不换行 */
            white-space: nowrap;
            /* 隐藏部分用省略号表示 */
            text-overflow: ellipsis;

2 清除子元素浮动给父盒子带来的影响

    <style>
        ul{
            width: 200px;
            margin: 100px auto;
            background-color: skyblue;
        }
        li{
            float: left;
            width: 20px;
            height: 20px;
            margin: 10px;
            list-style: none;
            background-color: pink;
        }
    </style>

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

可以看到li的父元素ul的背景颜色并没有显示出来，这是为什么呢，我们可以看一下父元素ul的高度。

<script>
        var ul = document.querySelector("ul");
        console.log(ul.offsetHeight);
    </script>

高度为零，所以背景色没有显示。出现这种情况的原因是，当li浮动后脱离标准流，ul本期望孩子li的内容可以把自己撑开，浮动后，li脱离标准流，不能撑开ul，此时可以用overflow：hidden清除浮动带来的脱标，使ul能够被li撑开。

 ul{
            width: 200px;
            margin: 100px auto;
            background-color: skyblue;
            overflow: hidden;
        }

3 解决外边距塌陷

外边距塌陷：当父盒子中含有子盒子时，当子盒子设置margin-top，父盒子也会下来。

加上overflow：hidden 父盒子便不会下来

阿大的冰棒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
overflow:hidden妙用

overflow妙用
复制链接

扫一扫

overflow:hidden妙用

1、首先最基础的用法是，隐藏溢出的内容

2 清除子元素浮动给父盒子带来的影响

3 解决外边距塌陷

“相关推荐”对你有帮助么？