可以使用CSS样式来实现这个效果:

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.search_name {
  width: 100%;
  overflow: hidden;
}

.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

其中,.flex-center类用于将子元素水平和垂直居中,.search_name类用于限制子元素的宽度,.text-ellipsis类用于实现文本省略号效果。在<text>元素中添加这些类名即可。

<view class="flex-center search_name">
  <text wx:for="{{i.name}}" wx:key="item" class="f32 text-ellipsis {{item === value ? 'high' : ''}}">{{item}}</text>
</view>
``
view class=flex-center search_name text-ellipsis text wxfor=iname wxkey=item class=f32 item === value high itemtext viewview盒子超出宽度text子盒子显示省略号

原文地址: https://www.cveoy.top/t/topic/ht7j 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录