cover-view 在小程序中是比較特殊的組件庶弃，與 view 的最大區(qū)別在于衫贬，它能覆蓋在原生組件 map、video歇攻、canvas固惯、camera 之上，且只能嵌套 cover-view 和 cover-image掉伏。
如上圖缝呕，在簡歷詳情頁面使用到了video組件，所以想在頁面上斧散，設置更高層級的視圖且保證不被video覆蓋供常，那么就需要使用cover-view了。由于項目需求是點擊立即聯(lián)系按鈕鸡捐，如果用戶有可抵用紅包栈暇，需要彈窗提示，預期效果如下：
cover-view默認屬性有：
cover-view {
display:block;
line-height:1.2;
overflow:hidden;
white-space:nowrap;
pointer-events:auto;
}
在項目中嘗試設置cover-view顯示的文本換行時箍镜，我修改 white-space 為 normal源祈，在模擬器上是有效的，如下圖所示：
換真機時無效色迂，subTitle內(nèi)容沒有換行顯示
改遠程調(diào)試時也無效香缺，但遠程調(diào)試時在編輯器窗口修改屬性（先刪除white-space: normal;， 再勾選回來）真機上竟然又有效歇僧，懵～
轉(zhuǎn)而查看代碼：（只粘貼需換行顯示部分的相關代碼）
<!-- 紅包抵用彈層 -->
<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;
在小程序社區(qū)搜索相關問題，有人提到可能是flex布局問題诈悍，于是我在頁面其他非flex布局的cover-view設置換行祸轮，如下圖第8行代碼處增加文字長度并設置了style：
真機運行真的可以換行，所以推測彈窗上沒出現(xiàn)換行可能是父類設置了display: flex; 目前因為改父類布局有點麻煩侥钳，所以在實現(xiàn) cover-view 內(nèi)容換行适袜，投機取巧用了最笨的辦法：
樣式不動，在文本中添加了\n換行符強制換行
<cover-view class="tip-subTitle">(大部分手機號可以加微信舷夺，申請備注\n在顏值招聘上看到)</cover-view>
當然這對于確定文本可以適用苦酱，如果要換行的內(nèi)容是綁定的數(shù)據(jù)且長度未知，那就不適用了冕房，因為在文本的哪個位置添加換行符就難以確定躏啰。上述問題最本質(zhì)的解決方案，應該是修改父容器的display: flex;屬性耙册。
另外針對項目中對cover-view使用中遇到的其他小問題進行總結(jié)：
1给僵、cover-view是覆蓋在原生組件之上的文本視圖，只支持嵌套cover-view详拙、cover-image
2帝际、cover-view不支持text-decoration屬性設置
3、cover-view設置文本內(nèi)容換行 white-space: normal;（注意flex布局時可能不起效果哦）
