微信小程序踩坑之text、view不自动换行问题解决

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

wxml 代码：

目标：使 class 为 title 的 text 文本自动换行。

<!-- 文字 -->
  <view class='list-content'>
    <text class='title'>{{index+1}}.{{item.title}}</text>
    <view class='more'>
      <text class='author'>作者：{{item.author_name}}</text>
      <text class='category'>类型：{{item.category}}</text>
      <text class='timer'>时间：{{item.date}}</text>
    </view>
  </view>

wxss 代码： 

.title{
  width: 100%;
  word-wrap: break-word;
  word-break: break-all;
  white-space: pre-line;
  font-weight: bold;
  margin: 2.5rpx 0.5rpx 2.5rpx 0.5rpx;
  
}

word-wrap: break-word;word-break: break-all;white-space: pre-line;

加上这三个就ok了。