解决微信小程序文字不换行

来源:简书 分类: 文章浏览史 发布时间:2020-08-30 17:48:39 最后更新:2020-08-30 浏览:133
转载声明:
本文为摘录自“简书”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-08-30 17:48:39

在微信小程序开发的过程中,遇到一点小问题:请求返回数据输入到页面,文字不换行。

场景复现

为了展示效果,提前加入多行文本模拟数据。如下图

初始化模拟数据

请求返回数据插入。如下图
请求返回数据

红色框区域内为实际输出内容,超出界面未自动换行。

解决办法

第一种方法 CSS设置

给需要使用换行的text标签添加CSS自动换行属性

text {
    word-wrap: break-word;
    word-break: normal;
}
第二种方法 遵循微信小程序标签使用规则输出内容

小程序中的textarea等标签虽然都是显示文本的双闭合标签,但在使用方式上跟W3C标准下的textarea标签有所不同。延伸阅读:微信小程序开发文档·textarea组件

微信小程序·textarea

在微信小程序中textarea组件有一个value属性,可通过该属性插入文本内容。
具体操作如下:
wxml页面

<textarea value='{{result}}' ></textarea>

js文件

data:{
  result:''
},
getResult:function(){
    let _this = this;
    wx.request({
     //------
      success:function(res){
        _this.setData({
          result: JSON.stringify(res.data)
        })
      }
    })
}
php技术微信