美文网首页小程序踩坑指南
cover-view内文字显示不全

cover-view内文字显示不全

作者: 徐喷以烟 | 来源:发表于2019-02-02 23:01 被阅读0次

    问题描述

    • cover-view标签内文字无法自动换行,导致显示不全
    • 测试代码

    wxml:

      <cover-view class='test'>这是一段很长很长很长很长很长很长很长很长的文字</cover-view>
    

    wxss:

    .test {
      width: 400rpx;
      height: 200rpx;
      background-color: #DDDDDD;
    }
    
    • 测试结果
    测试结果

    解决方案

    • 只需要在相应的cover-view的样式内添加一行代码
      white-space:pre-wrap;
    
    • 最终代码
      wxss:
    .test {
      width: 400rpx;
      height: 200rpx;
      background-color: #DDDDDD;
      white-space:pre-wrap;
    }
    
    • 测试结果
    测试结果

    补充

      white-space:pre-wrap;
    

    white-space :控制段落中的文本是否换行。
    pre-wrap:保留空格序列,正常进行换行。

    相关文章

      网友评论

        本文标题:cover-view内文字显示不全

        本文链接:https://www.haomeiwen.com/subject/ilpesqtx.html