之前寫過文章講cover-view的坑弛姜，但是坑太多了寻行，網(wǎng)上一片吐槽省撑。今天來說下最近新落入的兩個cover-view的坑：

文本不換行

<cover-view style="width: 100rpx;border: 1px solid red;">
    Helloworld Helloworld Helloworld Helloworld Helloworld Helloworld Helloworld
</cover-view>

如上面代碼，指定了cover-view的寬度丸相，然后里面會有一長串文字搔确，當(dāng)文本超出后，并沒有換行灭忠，超出部分被隱藏了膳算，效果：

測試后發(fā)現(xiàn)，iOS和Android上也是一樣的效果弛作，究其原因我們通過開發(fā)者工具可以發(fā)現(xiàn)：

cover-view自帶了一些樣式涕蜂，而問題的根源就出自overflow和white-space這兩個樣式，然后我試著覆蓋overflow屬性映琳，但是沒有任何效果宇葱，就是沒用瘦真，但解決這個問題主要還是white-space這個屬性，這個屬性有很多值：

white-space

經(jīng)過測試黍瞧，只要值不是nowrap就行，都能起到換行的作用原杂，效果如下：

開發(fā)者工具

IOS

Android

有沒有發(fā)現(xiàn)印颤，cover-view有多坑，三種環(huán)境穿肄，居然渲染出來三種不同的樣式年局，但是，這個坑必須要踩過去咸产，于是經(jīng)過多番測試矢否，發(fā)現(xiàn)如下三行代碼必須要加上：

white-space: pre-line;
word-break: break-all;
word-wrap:break-word;

最后效果就是這樣了：

雖然文本被強制拆開了，但好在問題是解決了脑溢，而且保證了ios和android上的一致僵朗。從這個問題，大致可以了解到小程序中Android和iOS對于文本的拆分有很大的差異屑彻，只能采用粗暴的解決方式（word-break: break-all）验庙。

文本顯示不全

這次我們不讓他換行了，就讓他一行顯示社牲，可是cover-view表現(xiàn)的也不完美粪薛，如下：

.list {
    line-height: 33rpx;
    word-wrap: break-word;
    word-break: break-all;
    white-space: pre-line;
    font-size: 24rpx;
}
.text {
    vertical-align: middle;
    display: inline-block;
}

<cover-view class="list">
    <cover-view class="text">
        價格：
    </cover-view>
    <cover-view class="text">
        &yen;988.00
    </cover-view>
</cover-view>

這里，文本的寬度沒有固定搏恤，由內(nèi)容自動擴充寬度违寿，各個環(huán)境的表現(xiàn)如下：

開發(fā)者工具

iOS

Android

在Android手機上，文本后面會顯示不全熟空，這個問題官方論壇也有很多：

一開始我以為是我css寫的有問題藤巢，調(diào)試了好久，各種布局然后加padding都沒用痛阻，沒想到我不是一個人菌瘪，最后只能多寫幾行javascript解決了：

<cover-view class="list">
    <cover-view class="text">
        價格：
    </cover-view>
    <cover-view class="text text2" :style="{width: width}">
        &yen;988.00
    </cover-view>
</cover-view>

data() {
    return {
        width: 'auto',
    }
},
onLoad() {
    const query = uni.createSelectorQuery().in(this)
    query.select('.text2').boundingClientRect(data => {
        console.log(data)
        this.width = data.width + 8 + 'px'
    }).exec()
},

方法是動態(tài)綁定元素的寬度，默認(rèn)值是auto阱当，頁面加載后等渲染完成獲取元素的實際寬度俏扩，然后再手動加上一點寬度。