如下图左侧图,候选项是后端的数据字典中动态管理的数据,并不能事先知道文本字数,即选项的所占宽度,也就无法直接设定宽度来让文本拥有个比较好的样式,那么想要达到右侧效果图那样的效果该怎么做?
可能很多人会考虑从宽度去解决问题,设置固定宽度 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.value wx.navigateTo({ url: `./form/form?id=&servicetype=${servicetype}`, }) }, })