微信小程序（五）——文字溢出断尾显示省略号

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

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

▍效果预览

先贴上最终实践效果：

▍实现方法

【注意】为了能更清晰的了解文字超限断尾的使用方法，以下所有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;
}

这就就大功告成了：

▍后记

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