在处理文本换行显示,通常会使用的元素有view和text,如果字符串固定可直接写入html页面元素内容中,如下:
1)text
<text class=""tipMsg>此场地只有会员可以预定\n如有预定需求请前往申请会员</text>
.tipMsg {
color: #fff;
margin: 60rpx;
font-size: 25rpx;
font-weight: 400;
font-family: PingFangSC-Light;
text-align: center;
word-wrap: break-word;
}
2)view
<view class=""tipMsg>此场地只有会员可以预定\n如有预定需求请前往申请会员</view>
使用view显示换行,则必须需要设置white-space属性
.tipMsg {
white-space: pre;
}
但有时需要换行的字符串是通过绑定方式传递给页面显示的,此时就要注意了:区分绑定字段是否为服务端返回,因为服务端返回换行字符串的方式有很多,比如:
1、源代码换行:使用换行符"\n"或者回车换行符"\r\n"
2、网页表现换行:<br />
...
如果直接使用,可能会导致页面显示不正确,此时,我们在获取服务端返回的字符串时,需要做个字符处理:
var tipMsg = ''
if (res.data.data.tip_msg.indexOf("\r\n") >= 0) {
tipMsg = res.data.data.tip_msg.replace("\\n", "\n");
}
仅以此文,记录自己遇到的问题:服务端返回给我字符串:"此场地只有会员可以预定\n如有预定需求请前往申请会员",我直接绑定显示时\n也被显示且没正确换行。
感谢 聪明的娃 和 shawn_xiao