微信小程序自动换行的实现

最新推荐文章于 2025-05-15 15:38:56 发布

灰暗角落里的琴

最新推荐文章于 2025-05-15 15:38:56 发布

阅读量2.4w

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/u012329294/article/details/79812751

微信小程序专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种在微信小程序中实现自动换行的方法。通过使用特定的wxml和wxss代码，可以使得文本在视图组件中自动换行，同时保持良好的布局效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序中的自动换行，实现代码如下：
wxml：
  <view class='header'>服务类型</view>
  <view class='ff_anniu' >
    <view class='ff_item' wx:for='{{categorys}}' wx:key='{{index}}'>
      <view class='ff_itemname sel {{activeIndex == index ? "sel" : ""}}' data-id='{{item.id}}' bindtap='binditem'>{{item.name}}</view>
    </view>
  </view>

wxss：

.ff_anniu
{
  width:100%;  
  display: flex;
    /* flex-direction: row;
  flex-wrap: true;   */      特别注意： 实测这里flex-flow 和 flex-direction / flex-wrap 是不一样的
     flex-flow: row wrap;     
  align-content: space-around;
  
}

.ff_item{  
   box-sizing: border-box;  
  flex: 0 0 33.3333333333333%;  
  font-size: 30rpx;
  color: #535353;
  background-color: white;
  padding: 20rpx;
  text-align: center;  
  display: block; 
}