微信小程序踩得坑 view中文字不能换行

微信小程序踩得坑 view中文字不能换行

最近在练习小程序,使用接口调取数据,渲染到界面的时候,发现标题过长超过了屏幕边框并没有自动换行,鉴于对css3不是很熟悉的后端人员,各种搜索,各种尝试,终于找到了答案

出现这种问题,截图:
wxml:<view class="wen">{{item.three}}</view>在这里插入图片描述
wxcss:.wen { width: 200rpx; font-size: 12px; background: #ccc }

解决方法:
wxss:.wen { width: 200rpx; font-size: 12px; word-wrap: break-word; word-break: break-all; white-space: pre-line; }
添加之后:
在这里插入图片描述
解决方法在:
wxss:word-wrap: break-word;
word-break: break-all;
white-space: pre-line;
就OK啦

发布了8 篇原创文章 · 获赞 0 · 访问量 89

猜你喜欢

转载自blog.csdn.net/Augur1212/article/details/103794898