一、去掉底部白色空隙
1.使用vertical-align: middle;属性可以去掉底部空隙
2.也可以使用转为块级元素也可完成,不推荐
二、添加文字尾部的省略号
代码及注释如下
/* 单行文字省略号 */
.box2 {
/*表示文字自动换行*/
/* white-space: normal; */
/*表示文字无法自动换行,强制显示在一行溢出*/
white-space: nowrap;
/* 将文字显示溢出的部分隐藏起来 */
overflow: hidden;
/* 表示将文字溢出的时候用省略号显示 */
text-overflow: ellipsis;
}
/* 多行文字省略号,兼容性较差 */
.box3 {
/* 将文字显示溢出的部分隐藏起来 */
overflow: hidden;
/* 表示将文字溢出的时候用省略号显示 */
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本行数 */
-webkit-line-clamp: 3;
/* 设置或检索伸缩盒子对象的子元素排列方式 */
-webkit-box-orient: vertical;
}