微信小程序--cover-view显示内容不全, 被截取的解决方案

单细胞的逻辑

于 2020-08-20 16:38:57 发布

阅读量4.6k

点赞数 1

分类专栏：微信小程序文章标签： cover-view 小程序微信截取显示不全

本文链接：https://blog.youkuaiyun.com/github_36843038/article/details/108126863

版权

微信小程序专栏收录该内容

4 篇文章

订阅专栏

本文介绍在小程序开发中，使用cover-view组件时遇到的文字截断问题及解决方案。通过在文字后面添加一个模拟空格的cover-view，有效避免了overflow:hidden属性导致的文字显示不全。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

案例:

在小程序的开发过程中, 自定义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; */
}

结果

在这里插入图片描述