css，文字过长实现省略号(设置高度后可指定行数)...

文字过长实现省略号…

小白的第一篇博客，分享今天在微信小程序中遇到的实现文字过多显示省略号的效果，把网上收集到两种情况整理到一起。

01在指定宽度中只要一行文字

截图

代码
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

实际效果

02文字在规定的行数排满后，多余的文字变成省略号

截图

• 此外，可以设置height高度值的，比如height高度太小，即css样式中指定两行之后文字再省略，但是由于文字大小和盒子高度，会使两行文字显示不全，即一行半文字的效果。

代码
/* 先换行再隐藏 /
display: -webkit-box;
/ 将对象作为弹性伸缩盒子模型显示 /
-webkit-box-orient: vertical;
/ 设置或检索伸缩盒对象的子元素的排列方式 /
-webkit-line-clamp: 2;
/ 指定几行 */
overflow: hidden;

效果

将height设置为line-height的整数倍，防止超出的文字露出

*参考的连接
https://blog.csdn.net/qq_43437571/article/details/104842767