最近在练习小程序,使用接口调取数据,渲染到界面的时候,发现标题过长超过了屏幕边框并没有自动换行,鉴于对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了。