真机cover-view数字被裁剪
发布于 6 年前 作者 jun46 14053 次浏览 来自 问答
  • 当前 Bug 的表现(可附上截图)
  • 预期表现

能够像Android真机一样,数字不会被裁剪

  • 复现路径
  • 提供一个最简复现 Demo

<cover-view class=‘bottom-panel’>

 <cover-view class=‘question’>iphone真机文字被裁剪,Android不会?</cover-view>

 <cover-view class=‘question’>全角问号不会裁剪?</cover-view>

 <cover-view class=‘question’>半角问号会裁剪?</cover-view>

 <cover-view class=‘question’>数字会被裁剪6543311</cover-view>

 <cover-view class=‘timer-container’>

   <cover-view class=‘time’>{{timer}}</cover-view>

   <cover-view class=‘time’>04:33</cover-view>

   <cover-view class=‘time’>04:33</cover-view>

 </cover-view>

</cover-view>

.question {

 /* font-size: 40rpx; */

 margin-top: 100rpx;

 background: aliceblue;

}

.bottom-panel {

 margin-top: 300rpx;

 /* z-index: 0; */

 display: flex;

 /* flex-wrap: wrap; */

 flex-direction: column;

 align-items:center;

 background: antiquewhite;

}

.timer-container {

display: flex;

 /* flex-wrap: wrap; */

 flex-direction: row;

 justify-content: space-around;

 width: 100%;

}

.time {

 color: #333;

 font-size: 55rpx;

 font-weight: 600;

 background: aliceblue;

}

5 回复

同我的这个问题: https://developers.weixin.qq.com/community/develop/doc/00084a65f20210f909973a02556400

希望快点修复,现在通过循环字符串放到一个一个view里面,太麻烦了。

大半年了,官方怎么还不修复这个bug?一点责任心都没吗

可以尝试在文本最后加一个空格

你好,如果是文本排版可以考虑不用cover-view的

我这几天也因为cover-view中的字在 ios 真机上最后一个字被部分截掉的现象抓狂。。后来用了变通的方法解决。。希望有所帮助

感觉像是cover-view的width短了一截,思路是先获取cover-view的width值再加上几个像素(我是在原基础上加了10px,按情况加),结果就都显示出来了,在安卓这多出来的一点空白也可以接受。获取width用的是

wx.createSelectorQuery()

#参考代码

#WXML

<cover-view class=“address” style=‘width:{{width1}}’>测试文字</cover-view>

#WXSS

.address{

font-size: 14px;

}

#js

Page({  

    data: {

        width:"",

    },

    OnLoad:function(){

        query=wx.createSelectorQuery();

        query.select(".address").boundingClientRect(function (rect) {

            W = rect.width + 10

               that.setData({

                width1: W + “px”

                })

        }).exec()

    }

})

回到顶部