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

最近在开发小程序,开发一个小组件,本来开发得差不多了,因为一个多行文本省略号的问题,拖了我一天啊(即使最后较好地解决了啊),可能是自己的开发经验不足导致了没能找到好的方案啊,把自己的经历写下来吧
一开始,我查了网上的各种资料,其实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取整,这样之后,就获取了每一行的文字,然后直接截取长度,拼接即可,然后自己再微调一下即可啊.
感觉自己好蠢啊~~~~