微信小程式--cover-view顯示内容不全, 被截取的解決方案

案例:

在小程式的開發過程中, 自定義Alert中, 使用的

cover-view

, 顯示進步部分, 但進行到 10/10 的時候, 發現 文字被截取了一段, 效果圖如下:

這個是因為

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; */
}
           

結果