案例:
在小程式的開發過程中, 自定義Alert中, 使用的
cover-view
, 顯示進步部分, 但進行到 10/10 的時候, 發現 文字被截取了一段, 效果圖如下:
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIyVGduV2YfNWawNCM38FdsYkRGZkRG9lcvx2bjxiNx8VZ6l2cs0TPB9keBpXTwcmaOpHOslVModEZwRmMMBjVtJWd0ckW65UbM5WOHJWa5kHT20ESjBjUIF2X0hXZ0xCMx81dvRWYoNHLrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdssmch1mclRXY39CXldWYtlWPzNXZj9mcw1ycz9WL49zZuBnLyAjN0EzNyYTMwIDOwAjMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
這個是因為
cover-view
自帶
overflow: hidden
屬性的原因.
但是呢,
cover-view
又不支援
flex
的布局, 是以修改屬性這個辦法就不行了
曲線救國:
我們在後面加一個空格效果的cover-view, 将cover-view顯示區域的後面給撐開, 下面是代碼:
.wxml
<cover-view class="content_view child_center">
<cover-view class="content_view_text">
{{content}}
<!-- 模拟空格 -->
<cover-view class="kong"></cover-view>
</cover-view>
</cover-view>
.wxss
.content_view {
width: 100%;
height: 40rpx;
margin-bottom: 33rpx;
}
.kong {
display: inline-block;
line-height: 40rpx;
width: 10rpx;
/* background-color: yellow; */
}
.content_view_text {
display: inline-block;
line-height: 40rpx;
color: #323232;
font-size: 32rpx;
/* background-color: red; */
}