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

最新推荐文章于 2022-12-19 14:42:45 发布
原创 最新推荐文章于 2022-12-19 14:42:45 发布 · 4.9k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#cover-view #小程序 #微信 #截取 #显示不全

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

案例:

在小程序的开发过程中, 自定义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
最低0.47元/天 解锁文章
uniapp 微信小程序 - 调起手机摄像头: 拍摄身份证的正反面，自定义身份证取景框，在相机上绘制 “身份证轮廓“ 与提示文字（超详细示例源码，一键复制运行开箱即用）
高级前端工程师
05-05 9247
uniapp微信小程序拍摄身份证专用相机，uniapp小程序如何在相机上增加图片和文字，uniapp微信小程序怎么给调起的相机加入自定义图片，unapp小程序实现给相机上面铺上身份证正反面轮廓，uniapp微信小程序自定义相机的取景框示例，uni-app实现小程序身份证取景框，uniapp小程序平台给相机加上身份证辅助线的轮廓，uniapp小程序实现身份证取景框拍摄，uniapp微信小程序自定义相机 ，给相机添加辅助框，解决拒绝相机默认授权后无法再次拉起相机授权问题，uni-app自定义摄像头拍照添加人物框
微信小程序1，常用组件 view、swiper、swiper-item、 scroll-view、 icon、progress、text、rich-text、button、input、image
qq_49080239的博客
03-09 866
组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。其中只可放置swiper-item组件，否则会导致未定义的行为，下方为常用属性，其他很多属性可以去官网看。现支持两种节点，通过 type 来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的 HTML 节点。支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0 起支持云文件ID。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。文本，为行内元素，类似于html中的span。
微信小程序 cover-view 显示不全问题 点击无效问题
a514659173的博客
07-01 5934
微信小程序很多地方需要用到 cover-view 来实现各种需求，但是 cover-view却有各种各样的坑 最近踩了2个坑，记录一下解决方案， 1、 cover-view 显示不全问题 在项目中碰到地图上要展示联系电话的需求，使用 cover-view，导致有时候电话号码会缺个1位，找了很久都没发现问题所在，最后采用了笨办法，手动设置宽度来实现，直接定义width：***，而不让他自己去撑开，就...
微信小程序cover-view内文字显示不全
ligret的博客
10-24 1826
问题描述 cover-view标签内文字无法自动换行，导致显示不全 测试代码 wxml: <cover-view class='test'>这是一段很长很长很长很长很长很长很长很长的文字</cover-view> wxss: .test { width: 400rpx; height: 200rpx; background-color: #DDDDDD; } 测试结果 解决方案 只需要在相应的cover-view的样式内添加一行代码 white-
微信小程序cover-view的坑
RELY_ON_YOURSELF的博客
11-13 1687
1. cover-view文字显示不全 问题描述: 先看下文字显示不全的样式 , 如图 , 文字末尾会有部分被截断 , 这个bug在iphone6,7上比较明显, 在iphone7plus等手机上不明显 , 但是细看还是会发现被截断了一部分 . 我尝试添加padding 和在文字末尾加上一个空格(" ") , 都没有结果 . 后来查询发现是小程序本身的一个bug , 目前官方还没有解决 . 解决...
微信小程序cover-view标签裁剪数字,显示不完全问题
d583531572的博客
03-28 1178
微信小程序cover-view标签裁剪数字,显示不完全问题 html:数字后面新加空cover-view标签,类名设为class=‘blank’ <cover-view class="price"> 合计: <cover-view class="total-price">￥{{total.newPrice}} ...
cover-view里的文字不换行
xm_law的博客
12-10 3575
&lt;cover-view class="text"&gt; 这段文字不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行 &lt;/cover-view&gt; &lt;style&gt; .text{ display:block; white-space: pre-wrap; } &lt;/style&gt; ...
小程序cover-view 标签 字被截掉的坑
柠檬酸
03-06 1432
小程序中用到map组件时只能用cover-view标签覆盖在地图上，但是会有一个问题，字会被截掉一部分，加marging、padding都不好使 解决办法 设置一个字体 font-family:-apple-system; 就可以了 或者 在两边加个空标签占位置 .kong{display:inline-block;width:10rpx;line-height:25rpx;} ...
微信小程序实现拍照画布指定区域生成图片
10-16
本文将详细介绍如何在微信小程序中实现拍照功能，并在画布上指定某个区域来截取图片。 首先，了解微信小程序中的Camera组件。它是微信小程序提供的一种原生组件，允许用户直接在小程序中实现拍照功能。不过，使用...
微信小程序视频封面使用图片
12-29
在微信小程序中，开发者经常需要处理视频相关的功能，其中视频封面是用户首次接触视频时的重要视觉元素。在本文中，我们将深入探讨如何在微信小程序中使用自定义图片作为视频封面，因为默认的`poster`属性可能在某些...
uniapp 使用map组件 cover-view在真机模拟上文字不显示等要注意的点
m0_68324158的博客
06-24 7081
自己做项目时出现的坑，记录一下 实现在map组件中点击markers点位出现点位信息
微信小程序内解决view内文字过多溢出
Pumily的脱发历程
10-16 4180
【代码】微信小程序内解决view内文字过多溢出。
【微信小程序】 cover-view 内文字在IOS 被遮挡截取显示不全的问题
IU
05-19 1093
如图 居家日常被截取掉了 代码 解决方法 在文字后面添加一个全角空格 就能解决该问题
小程序踩坑：cover-view显示问题
热门推荐
peade的博客
03-27 1万+
在ios下，cover-view 始终是overflow:hidden方式显示，无论怎么调整，都不会变化。而在android下，overflow的样式可以被覆盖的。 cover-view下，设置了z-index不起作用。 基于以上的考虑，在设计图和页面实现时，应该考虑到这种情况的影响。存在页面元素交叉覆盖时，就不容易实现了。 ...
Duilib嵌入CEF出现窗口显示不正常
weixin_30483495的博客
11-24 614
参考资料：https://www.aliyun.com/zixun/wenji/1247250.html 转载：https://www.cnblogs.com/gongxijun/p/4857977.html 转载：https://www.cnblogs.com/jackiesteed/articles/3343012.html 转载：https://www.zhaokeli.co...
微信小程序 cover-view 组件文字丢失问题。
X_lizhu93的博客
07-29 1027
如图所示，当频繁点击展示筛选浮层，底部按钮文字会丢失，代码如下。 <cover-viewclass='resetbtn'catchtap='fzlreset'>重置</cover-view> <cover-viewclass='confirmbtn'catchtap='fzlsub'>确定</cover-view> 解决办法：将按钮用图片表示 <cover-imagesrc="../../images/btn_res...
微信小程序cover-view、view标签内文字无法自动换行的解决办法
wohenshenmi的博客
12-19 936
在对应的cover-view样式中添加如下样式。： 在对应的view样式中添加如下样式。: 控制段落中的文本是否换行。: 保留空格，正常换行。
【已解决】小程序map控件上的cover-view不显示的问题
u013171212的博客
05-30 8011
我碰到的问题的因为cover-view 控件代码写在 map 之前 也就是层级在 map 控件之下所以不显示 应写成下面的样子红框的 map 代码 一定要在最顶上 所有 cover-view 要在 map 代码之下 // END ...
阿里巴巴图标png 文件在微信小程序使用 会截取一点 如何处理
最新发布
10-23
根据用户的问题，用户希望解决阿里巴巴图标PNG文件在微信小程序中使用时被截取的问题。结合提供的引用内容，尤其是引用[1]中关于微信小程序进度条的样式属性（如border-radius、activeColor等）和引用[4]中关于微信...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值