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 父盒子便不会下来