微信小程序开发:微信小程序长文字实现自动换行
时间:2022年07月25日 01:16:36
来源:adminweb
浏览:244
一、方法1:css word-break
word-break: break-all;
在需要换行的view上添加这个样式即可。
二、方法2:css width %
如显示3个一排。
使用的是width: 31%;
wxml文件 <!--3个一排,超过换行--> <view class="link"> <view class="link_child"> 1212 </view> <view class="link_child"> 1212 </view> <view class="link_child"> 1212 </view> <view class="link_child"> 1212 </view> </view>
wxss文件 .link { display: flex; flex-direction: row; flex-wrap: wrap; width: 654rpx; margin: 0 auto; position: relative; left: 5rpx; } .link_child { width: 31%; background: red; border: 1rpx solid black; } .link_child:not(:nth-child(3n)){ margin-right: 10rpx; }
三、方法3:css width rpx
如显示3个一排。
使用的 width: 200rpx;(需要是3的倍数)
wxml文件 <view class="father"> <view class="child test"> 1 </view> <view class="child test"> 2 </view> <view class="child test"> 3 </view> <view class="child test"> 4 </view> <view class="child test"> 5 </view> <view class="child test"> 6 </view> </view>
wxss文件 .test { border: 2rpx solid black; } .father { width: 660rpx; display:flex; flex-wrap:wrap; justify-content:space-between; } .child{ width: 200rpx; }
标题:微信小程序开发:微信小程序长文字实现自动换行
链接:http://zblogmoban.tianwenhai.com/26.html
版权:文章转载自网络,如有侵权,请联系删除!
相关推荐
更多