小程序开发中遇到的问题(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
}

 

关于

联系方式 :

mail: hey_cool@163.com ,
QQ:583459700

备案许可证编号:蜀ICP备16005545号-1 © COPYRIGHT 2015-2021 zhmzjl.com | by: KAPO