方案一:
只显示一行,超限后使用省略号代替
.detail {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/ff031ae1e6464c4aa6049f019e88e466.png)
方案二:
显示多行,到最后一行还没有显示完,则最后一行多出来的部分使用省略号代替。
.detail {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/dc6cb511c41545d094027a60dcc8eafb.png)