微信小程序--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; */
}

结果