如下图左侧图，候选项是后端的数据字典中动态管理的数据，并不能事先知道文本字数，即选项的所占宽度，也就无法直接设定宽度来让文本拥有个比较好的样式，那么想要达到右侧效果图那样的效果该怎么做？

可能很多人会考虑从宽度去解决问题，设置固定宽度 width、最小宽度 min-width…但遇到了字数较多等情况，用户体验并不不怎么好，我愣了一会儿，突然意识到，这是宽度不够，导致文本自动换行了，那我用 css 属性设置文本不换行呢？

• 顺带设置个最大宽度，让太长的文本显示省略号，不至于页面样式混乱

  /* 设定最大宽度，超出显示省略号... */max-width: 350rpx;overflow: hidden;text-overflow: ellipsis;/* 设定最大宽度，超出显示省略号... */white-space: nowrap; /* 关键样式代码 */

结果还真行，easy 而且个人感觉兼容性还挺好，就很 nice，记录一下

按钮和选项的结构代码

<view class="addBtn" bindtap="addApply"><view class="options"><view class="option-row" bindtap="addNewApply" data-value="1">预约来访</view><view class="option-row" bindtap="addNewApply" data-value="2">营业执照代办</view><view class="option-row" bindtap="addNewApply" data-value="3">厂房租赁价格代办</view></view>
</view>

按钮和选项的样式代码

.addBtn {width: 120rpx;height: 120rpx;border-radius: 50%;background-color: #00A0E9;box-shadow: 0 2px 12px 0 rgb(0 0 0 / 40%);color: white;font-size: 120rpx;position: fixed;right: 20rpx;bottom: 20rpx;
}
.addBtn::before {content: "";display: block;width: 65rpx;height: 10rpx;border-radius: 10rpx;background-color: white;position: absolute;left: calc(50% - 32.5rpx);top: calc(50% - 5rpx);
}
.addBtn::after {content: "";display: block;width: 10rpx;height: 65rpx;border-radius: 10rpx;background-color: white;position: absolute;left: calc(50% - 5rpx);top: calc(50% - 32.5rpx);
}.options {font-size: 28rpx;position: absolute;right: -20rpx;bottom: 100rpx;opacity: 0;pointer-events: none;transition: right 0.3s;
}
.options.show {opacity: 1;right: 110rpx;pointer-events: initial;
}
.option-row {color: white;background-color: #00A0E9;box-shadow: 0 2px 8px 0 rgb(0 0 0 / 40%);/* 设定最大宽度，超出显示省略号... */max-width: 350rpx;overflow: hidden;text-overflow: ellipsis;/* 设定最大宽度，超出显示省略号... */white-space: nowrap; /* 关键代码 */padding: 4rpx 14rpx;border-radius: 4rpx;margin-top: 12rpx;text-align: center;
}

点击加号展示收起选项的逻辑代码

Page({/*** 页面的初始数据*/data: {showAddOption: false,},addApply() {this.setData({showAddOption: !this.data.showAddOption,})},addNewApply(event) {let servicetype = event.currentTarget.dataset.valuewx.navigateTo({url: `./form/form?id=&servicetype=${servicetype}`,})},})

ps: 这是农历2021年的最后一篇博客，也是2022年1月的最后一篇博客，祝大家除夕快乐，新年快乐，新的一年节节高升，一切都好~