cover-view 在小程序中是比较特殊的组件，与 view 的最大区别在于，它能覆盖在原生组件 map、video、canvas、camera 之上，且只能嵌套 cover-view 和 cover-image。
简历详情页.png
如上图，在简历详情页面使用到了video组件，所以想在页面上，设置更高层级的视图且保证不被video覆盖，那么就需要使用cover-view了。由于项目需求是点击立即联系按钮，如果用户有可抵用红包，需要弹窗提示，预期效果如下：
自定义弹窗.png
cover-view默认属性有：
cover-view {
display:block;
line-height:1.2;
overflow:hidden;
white-space:nowrap;
pointer-events:auto;
}
在项目中尝试设置cover-view显示的文本换行时，我修改 white-space 为 normal，在模拟器上是有效的，如下图所示：
模拟器运行效果.png
换真机时无效，subTitle内容没有换行显示
真机运行无效.png
改远程调试时也无效，但远程调试时在编辑器窗口修改属性（先删除white-space: normal;， 再勾选回来）真机上竟然又有效，懵～
转而查看代码：（只粘贴需换行显示部分的相关代码）
<!-- 红包抵用弹层 -->
<cover-view class="pop-up" hidden="{{modelHidden}}">
<cover-view class="pop-up-container">
<cover-view class="top-title">报告老板：有{{reviewNum}}个人正在看TA的短视频</cover-view>
<cover-view class="tip-title">直接打电话效率最高</cover-view>
<cover-view class="tip-subTitle">(大部分手机号可以加微信，申请备注在颜值招聘上看到)</cover-view>
</cover-view>
<cover-image class="close" src="/image/close@3x.png" bindtap="closePopUp"></cover-image>
</cover-view>
/* 弹出层 */
.pop-up{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 999999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.pop-up-container{
width: 580rpx;
background-color: #fff;
border-radius: 8rpx;
color: #666;
font-size: 28rpx;
}
.top-title {
background-color: #fe6dad;
color: white;
height: 100rpx;
text-align: center;
line-height: 100rpx;
}
.tip-title {
margin-top: 60rpx;
margin-left: 57rpx;
color: #272727;
font-size: 32rpx;
}
.tip-subTitle {
margin: 10rpx 57rpx auto 57rpx;
white-space: normal;
line-height: 1.6;
}
给.tip-subTitle同时设置了真机依然无效
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal;
在小程序社区搜索相关问题，有人提到可能是flex布局问题，于是我在页面其他非flex布局的cover-view设置换行，如下图第8行代码处增加文字长度并设置了style：
尝试非flex布局设置cover-view内容换行.png
真机运行真的可以换行，所以推测弹窗上没出现换行可能是父类设置了display: flex; 目前因为改父类布局有点麻烦，所以在实现 cover-view 内容换行，投机取巧用了最笨的办法：
样式不动，在文本中添加了\n换行符强制换行
<cover-view class="tip-subTitle">(大部分手机号可以加微信，申请备注\n在颜值招聘上看到)</cover-view>
当然这对于确定文本可以适用，如果要换行的内容是绑定的数据且长度未知，那就不适用了，因为在文本的哪个位置添加换行符就难以确定。上述问题最本质的解决方案，应该是修改父容器的display: flex;属性。
另外针对项目中对cover-view使用中遇到的其他小问题进行总结：
1、cover-view是覆盖在原生组件之上的文本视图，只支持嵌套cover-view、cover-image
2、cover-view不支持text-decoration属性设置
3、cover-view设置文本内容换行 white-space: normal;（注意flex布局时可能不起效果哦）
