微信小程序 view的文本自动换行了的问题(scroll-view)/微信小程序 view换行跟不换行的解决方案

今天在写一个滚动导航栏的时候发现 view的文本自动换行了,用了display:flex;flex-warp:nowarp;也不管用,
wxml:



{{item}}

wxss:

.top{
width: 100%;
height: 100rpx;
background-color: #F6F5F6;
display: flex;
}

.date{
height: 100rpx;
width: 80rpx;
margin:0rpx 20rpx;
display:flex;
line-height: 100rpx;
}
需求:呈现完整的文字:全部,今天,明天
微信小程序 view的文本自动换行了的问题(scroll-view)/微信小程序 view换行跟不换行的解决方案_第1张图片
再上述wxss文件中添加代码: word-break: keep-all;
微信小程序 view的文本自动换行了的问题(scroll-view)/微信小程序 view换行跟不换行的解决方案_第2张图片最后分享一下解决问题的心理路程:
一般遇到问题先找官方文档看下怎么处理,显然这种问题应该不会被记录在官方文档,于是我上网搜一下解决方案,但是大家的问题基本都是:“微信小程序 view的文本不能自动换行问题”,而我的问题是他自动换行了呀,于是我点开看了一下,
微信小程序 view的文本自动换行了的问题(scroll-view)/微信小程序 view换行跟不换行的解决方案_第3张图片我想的是在word-break这个属性是不是能控制换行问题,于是我在我写下Word-break的时候果然有提示:
微信小程序 view的文本自动换行了的问题(scroll-view)/微信小程序 view换行跟不换行的解决方案_第4张图片

你可能感兴趣的:(微信小程序,小程序)