文字过长实现省略号…
小白的第一篇博客,分享今天在微信小程序中遇到的实现文字过多显示省略号的效果,把网上收集到两种情况整理到一起。
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