字符串换行显示

在处理文本换行显示,通常会使用的元素有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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,313评论 0 3
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,142评论 1 32
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,162评论 0 21
  • 以前非常非常喜欢你,喜欢不得了,天天找各种理由去找你聊天,就算在无聊的东西都像新奇宝宝一样去给你看 ,希望和你说上...
    荼靡味阅读 235评论 0 0
  • 图片发自简书App 十五年前,我给周南前妻坟地边栽了两株白玉兰,现在,那两株白玉兰已经直入云霄了。每一年的三四月份...
    彩缤阅读 4,130评论 176 138