1.清除浮动
/* 万能清除法 */
.clearfix:after { // 此处的clearfix是浮动元素的父元素
content: "";
height: 0;
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
}
2.单行文本溢出显示省略号
.content {
width: 200px;
/*限制宽度*/
overflow: hidden;
/*内容超出后隐藏*/
text-overflow: ellipsis;
/* 超出内容显示为省略号*/
white-space: nowrap;
/*文本不进行换行*/
}
3.多行文本溢出显示省略号
.content {
width: 200px;
/*限制元素宽度*/
overflow: hidden;
/*文本超出隐藏*/
display: -webkit-box;
/*盒子模型微弹性伸缩模型*/
-webkit-box-orient: vertical;
/*伸缩盒子的子元素垂直排列*/
-webkit-line-clamp: 3;
/*文本显示3行*/
}
4.文字不满一行时居中,超过一行靠左
.content {
width: 200px;
height: 80px;
background-color: coral;
text-align: center;
}
.content>p {
display: inline-block;
text-align: left;
}
5.子元素在父元素中垂直居中
方法有很多种,可移步至 CSS实现子元素在父元素中水平垂直居中的方法总结 查看
这里列举的只是我暂时想到的,欢迎补充!