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

小程序下拉列表实现代码。（下箭头是我自己找的，就不放出来了）
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的值就可以实现对应的功能了。