盒模型主要包含四部分:
<body>
)也就是清楚浮动,就是将父元素变为一个 BFC 就可以解决。如设置:overflow:hidden;
两个块同在一个 BFC 会造成垂直方向的外边距折叠,但如果对这两个块分别设置 BFC,那么边距重叠的问题就不存在了。
在一个BFC中使用两个BFC可以做两列布局时使用
.container {
display: grid;
place-items: center;
}
<style>
p{
/* 控制显示文字的长度 */
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
/*禁止换行显示*/
white-space: nowrap;
background-color: #ffe51a;
}
<style>
<body>
<p>哈哈哈哈哈哈哈,哈哈哈哈哈,哈哈哈哈哈哈哈</p>
</body>
<style>
p {
width: 100px;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
/*控制在3行*/
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
background-color:#ffe51a;
}
<style>
<body>
<p>哈哈哈哈哈哈哈,哈哈哈哈哈,哈哈哈哈哈哈哈</p>
</body>