小程序开发中遇到的问题(11)-小程序scroll-view中文字不换行问

解决方案：在需要换行的文本上设置 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
}