[JavaScript知识库]文字横向自适应宽度并横向排列

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

可能很多人会考虑从宽度去解决问题，设置固定宽度 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}`,
    })
  },

})

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