微信小程序cover-view内文字显示不全

问题描述

• 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;
}

• 测试结果

• 参考
  微信开放社区https://developers.weixin.qq.com/community/develop/doc/b72461f6edbfbb64a2a4662bee786e48

补充

  white-space:pre-wrap;

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