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

左手的ㄟ右手 2022-05-18 09:53 188阅读 0赞

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

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

▍效果预览

先贴上最终实践效果：

![70][]

▍实现方法

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

1、文字超出一行，省略超出部分（不限制宽度）：

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

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

![70 1][]

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

2、文字超出一行，省略超出部分（限制宽度）：

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

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

![70 2][]

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

3、自定义显示的行数：

.list-item-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;
    }

这就就大功告成了：

![70 3][]

▍后记

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

![70 4][]

[70]: /images/20220518/6d744d2361e248f3b4c86a174413f776.png
[70 1]: /images/20220518/ccc599ab27124892a2930adf469d6cbb.png
[70 2]: /images/20220518/c751c0bf837a4fb8b5a766d1689bb748.png
[70 3]: /images/20220518/f8f5c254cfc14701bc41e6a50d3ef48f.png
[70 4]: /images/20220518/a91317f6f52e4b50b1670fa0453ccf92.png