小程序开发中遇到的问题(11)-小程序scroll-view中文字不换行问
2018-07-28 14:02:21
解决方案:在需要换行的文本上设置 white-space: pre-wrap;
问题原由:
scroll-view中设置了scroll-x="true"后,,可滚动视图区域暂时还不能横向滚动。需要把scroll-view的样式设置为white-space: nowrap; 并且子元素设置为 display: inline-block,这样就能横向滚动了;
但实际中会出现如文字不换行或样式错乱的问题。
<view class="Rose-news"> <view class="Rose-floor-title">精选</view> <scroll-view class="Rose-best" scroll-x="true"> <view class="Rose-best-item" ontap="articleDetail"> <image class="Rose-imgbest" src="/assets/images/wx_04.jpg"></image> <view class="Rose-title">古之学者必有师。师者,所以传道受业解惑也</view> <view class="Rose-time text-left">2018-12-12 12:12:35</view> </view> <view class="Rose-best-item" ontap="articleDetail"> <image class="Rose-imgbest" src="/assets/images/wx_04.jpg"></image> <view class="Rose-title">古之学者必有师。师者,所以传道受业解惑也</view> <view class="Rose-time text-left">2018-12-12 12:12:35</view> </view> </scroll-view> </view>
.Rose-best { position: relative; width: 100%; overflow: hidden; white-space: nowrap; } .Rose-best-item { display: inline-block; margin: 0 10rpx; width: 638rpx; vertical-align: top } .Rose-imgbest { width: 100%; height: 330rpx; } .Rose-title { padding: 30rpx 0; font-size: 34rpx; color: #333; }
这样设置后,scroll-view中的所有文本都不能换行,即使设置了word-break:break-all,word-wrap:break-word;文字依然不能换行,想过很多办法,仍然不能;
然后查资料得知,正是因为scroll-view设置了white-space:nowrap属性,所以文本不能换行了,解决方案是
在需要换行的文本中添加white-space: pre-wrap,就能换行了
完整代码为
.Rose-title { padding: 30rpx 0; font-size: 34rpx; color: #333; white-space: pre-wrap }