微信小程序之多行文本省略号

最近在开发小程序,开发一个小组件,本来开发得差不多了,因为一个多行文本省略号的问题,拖了我一天啊(即使最后较好地解决了啊),可能是自己的开发经验不足导致了没能找到好的方案啊,把自己的经历写下来吧
一开始,我查了网上的各种资料,其实CSS就足以实现单行文本省略号和多行文本省略号(多行文本省略号主要针对的是-webkit-内核的浏览器,因为使用到的属性是webkit内核自带的一些私有属性,非此内核的用其他方案解决,但是针对微信小程序讲道理是可以用这些属性的啊),但是,的的确确,效果很差:
一开始是这样的:
.xxx {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
}
在chrome里面的效果是这样的啊:

确实没什么问题啊,但是一旦到了微信小程序,你就会发现大变样啊,变得你妈妈都不认识你啊.
想想算了,放弃了,调了半天也不见得好,打算改用js配合DOM的方式来,在编辑器里都已经把测试代码写好了,结果忘了那是微信小程序,我去,这就跟vuejs一样,操作DOM是一种笑话,尤其是在小程序里面,连标签都不一样,谁知道会有什么属性又怎么去获取.
后来,组长提醒了一下,微信小程序有访问DOM的接口,去官网看了一下,确实有一个createSelectorQuery()的方法,然后开始使用这个方法,以为这样就可以了,后来遇到异步问题用promise解决,解决了老半天发现,小程序的数据绑定渲染回页面的期间,获取元素高度的方法早就已经返回数值了,好尴尬啊,有人说等他返回啊,这不是promise能解决的,如果你真要等,你的页面效果会极差,因为你用js配合DOM的方法是这样去实现省略号的,循环判断当前元素高度,如果当前元素高度超过目标行数高度,那么字符串就减一直到满足条件后,补上”…”,这样的方式,你每次都等并不现实,后来改进了一下想法,判断一行会有几个字,只要高度发生变化,就可以知道已经是整行整行的字符了,这个时候,就可以直接减去相应的字符达到要求,但是还是那个问题,没法判断什么时候高度减小了
后来经人提醒,可以用屏幕宽度配合font-size来实现这个省略号,我才恍然大悟啊,直接获取屏幕宽度,然后减去多余的margin,padding,然后除以font-size取整,这样之后,就获取了每一行的文字,然后直接截取长度,拼接即可,然后自己再微调一下即可啊.
感觉自己好蠢啊~~~~

微信小程序之多行文本省略号相关推荐

uniapp开发微信小程序，多行文本换行，动态改变文字区域宽度
需求:商品标题部分超出两行显示- 且当点击编辑显示选择按钮后,文字区域宽度变小后,文字不能溢出. 如图: HTML代码  <view class="g ...
微信小程序之日记本，纪录人生（微信小程序之小熊の日记）
功能完备,实用导向,Server端API支持,涵盖众多组件.API使用,适用于学习微信小程序,多行文本模拟实现tab切换模态框和本地数据组织及存储,有图片预览功能,微信小程序方便人们的生活. 下面是微 ...
java小程序显示多种按钮_微信小程序多行文本显示...+显示更多按钮和收起更多按钮功能...
看了很多帖子,但是效果都不是很好.还是找微信小程序官方文档,自己写比较方便.自己动手丰衣足食!话不多说,上代码! 先来个效果图 html {{item.text}} 查看更多收起 wxss .box ...
基于spring-boot的社区社交微信小程序，适合做脚手架、二次开发
代码地址如下: http://www.demodashi.com/demo/13867.html 1 概述笔者做的一个后端基于spring-boot的社区社交微信小程序,可以作为开发的脚手架,开发速 ...
终于搞定微信小程序canvas分享海报
canvas drawer 做微信小程序中最好用的 canvas 绘图组件之一. 当前环境下,大家都非常需要分享到朋友圈这个功能,但是实现起来各有心酸(坑比较多),所以才有了如下的 canvas 绘图 ...
【Python案例】Python实现垃圾分类APP(附带微信小程序)
嗨嗨,大家好呀,我是小圆~ 今天给你们分享一个有趣的东西如何利用现有的工具来实现一个垃圾分类的应用主要做了三个核心内容: 对比现有垃圾分类服务,挑选一个合适并编码实现开发桌面版垃圾分类APP 开 ...
微信小程序常用组件
欢迎体验个人小程序表情小作坊轻松定制表情包三连图文字转图片吃什么都行解决广大用户吃饭选择恐惧症的问题微信小程序的组件也挺多了,还是把官网的组件介绍地址先贴出来吧 https://mp.w ...
微信小程序老男孩课程（day1-2.5 到django不会了..要学Pythone）
Day1 微信小程序 1 .什么是微信小程序如何开发微信小程序 - 小程序:微信开发的语言 (前端html.css.js) API:restful接口(Phthon +django+drf框架) p ...
官方问答--微信小程序常见FAQ (17.8.21-17.8.27)
给提问的开发者的建议: 提问之前先查询文档.通过社区右上角搜索搜索已经存在的问题. 写一个简明扼要的标题,并且正文描述清楚你的问题. 提交 BUG:需要带上基础库版本号,设备信息(iOS, Andr ...

微信小程序之多行文本省略号

微信小程序之多行文本省略号相关推荐

最新文章

热门文章