微信小程序实现下拉列表且单行内容过多显示省略号

小程序下拉列表实现代码。（下箭头是我自己找的，就不放出来了）
wxml代码：

<view class="page">
<view class="body_head" bindtap="showitem"> 1.范围<image wx:if='{{serverUrl}}' src="{{serverUrl}}/wxImg/xiajiantou.png" class='xiaImg'></image></view>
<view class="{{open?'display_show':'display_none'}}" bindtap='openDetail' data-book='1.1'>第1.1节 范围</view>
<view class="body_head" bindtap="showitem2"> 2.规范性引用文件<image wx:if='{{serverUrl}}' src="{{serverUrl}}/wxImg/xiajiantou.png" class='xiaImg'></image></view>
<view class="{{open2?'display_show':'display_none'}}" bindtap='openDetail' data-book='2.1'>第2.1节 规范性引用文件</view>
</view>

wxss代码：

.body_head{
text-indent:10rpx;
font-size: 18px;
border-color: beige;
padding: 2.5px;
}
.display_show{
font-size: 18px;
display: block;
border-color: beige;
padding: 2.5px;
text-indent:50rpx;
}
.display_none{
display: none;
}
.xiaImg{
height: 0.8rem;
width: 0.8rem;
}

js代码：

const app = getApp();
var header = app.globalData.header;
var serverUrl = app.globalData.serverUrl;

Page({
data: {
serverUrl: '',
open: false,
open2: false
},
showitem: function () {
this.setData({
open: !this.data.open
})
},
showitem2: function () {
this.setData({
open2: !this.data.open2
})
},
openDetail:function(e){
// 点击事件
// 跳转页面
wx.navigateTo({
url: 'xxxxx',
})
},
onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
this.setData({
serverUrl: serverUrl
})
},
onReady: function () {
// 页面渲染完成
},
onShow: function () {
// 页面显示
},
onHide: function () {
// 页面隐藏
},
onUnload: function () {
// 页面关闭
}
})

效果如下：


但是有时候会出现单行显示不下，自动换行的情况：

这个时候可以给它加一个样式。
wxml中给class加个moreHide：

<view class="moreHide body_head" bindtap="showitem10"> 10.发电机、同期调相机和高压电动机的维修、维护工作<image wx:if='{{serverUrl}}' src="{{serverUrl}}/wxImg/xiajiantou.png" class='xiaImg'></image></view>

wxss中加上moreHide：

.moreHide{
overflow:hidden;//超出一行文字自动隐藏
text-overflow:ellipsis;//文字隐藏后添加省略号
white-space:nowrap;//强制不换行
}

这样就可以简单的实现这个功能啦~

那么在这里为什么没有了哪个向下的箭头呢？
那是因为在这里我把箭头的image放在了和文字的同一个view中，如果想实现这个效果的同时还要显示箭头，就可以用一个标签将文字包裹起来，然后给这个标签的class加上刚刚写的moreHide就行了。
当然也可以用substring来截取前20，前30等等的这样，并在最后加上省略号来实现，但是在这里就不建议这样了，因为这样的话还要做个长度判断，不入上面那个来的简单粗暴。
如果想要实现多行的，将wxss换成如下：

display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 3;//行数
-webkit-box-orient: vertical;

改变对应的-webkit-line-clamp的值就可以实现对应的功能了。