微信小程序(5)——文字溢出断尾显示省略号

版权声明:本文为博主原创文章,转载时请注明出处。 https://blog.csdn.net/i_dont_know_a/article/details/81354862

 

▍写在前面(来访者请直接浏览下一条)

在写页面的时候遇到一个问题:需要对某件商品进行描述,但是往往描述文字过长,如果全部一次性显示可能对样式的一致性造成破坏,影响页面美观,于是我联想到了之前在很多网站上见过省略部分文字的方法,决定自己实践一次。

 

▍效果预览

先贴上最终实践效果:

▍实现方法

【注意】为了能更清晰的了解文字超限断尾的使用方法,以下所有css代码将省略全部关于字体以及颜色设置的样式。

1、文字超出一行,省略超出部分(不限制宽度):

.business .menuList .list-item .item-body .body-instructions{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

因为我的父元素是flex布局,而右侧的文字部分没有设置宽度,所以将左侧的图片给挤压到很窄了;另外,只显示了一行文字,最后面显示的是“…”:

因而为了不造成样式的挤压,所以需要给文字区域设置宽度。

2、文字超出一行,省略超出部分(限制宽度):

.business .menuList .list-item .item-body .body-instructions{
  width: 490rpx;
  max-width: 490rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

这样宽度设置好了,也就不会对图片造成挤压了。

但是下面的区域空白还是有些不太合适,所以我还想自定义显示的行数。

3、自定义显示的行数:

.business .menuList .list-item .item-body .body-instructions{
  /* 控制宽度 */
  width: 490rpx;
  max-width: 490rpx;
  /* 控制显示的行数 */
  max-height: 150rpx;
  line-height: 30rpx;
  /* 显示多行 */
  display:-webkit-box; 
  overflow:hidden; 
  /* 5为显示的行数 */
  -webkit-line-clamp:5;
  -webkit-box-orient:vertical;
}

这就就大功告成了:

 

▍后记

当然上面的效果图是在微信开发者工具里实现的,当我在手机上查看的时候,发现样式跟开发者工具上的还是存在一些差别(在省略号的下一行竟然还会有文字出现)。

没有更多推荐了,返回首页