文字横向自适应宽度并横向排列

2022-01-31 22:02:23 阅读：175 来源： 互联网

标签：... 排列省略号 color 横向 width 宽度 white

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

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

})

标签：...,排列,省略号,color,横向,width,宽度,white
来源： https://www.cnblogs.com/suwanbin/p/15858645.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

文字横向自适应宽度并横向排列