显示两行,超出显示省略号

```javascript

asdasd

```

### 阿斯顿撒

电商移动端需求,商品名过长,需要两行显示,超出两行后,显示省略号。作为菜鸟的我,左右为难,各种搜方法,最终还是没用!算啦,还是靠自己吧,用jquery写一个!


:after支持attr()方法,就可以任意添加各种图片,文体
这个功能有点死,必须知道一行的高度


这代码着实不能见人,只实现了功能,以后在优化吧。。。

基本思路 

先算出一行文字容器的高度(这跟你设置的字体大小有关),再判断标题是否超出两行(标题高度大于两倍文字容器的高度)

超出两行,获取文字长度(空格,数字,大小字母,汉字长度各为一),for循环,循环一次,获取文字容器高度,判断是否超出两行

截取文字 substring(0,文字长度-循环次数),直到小于两行,在:after添加省略号,完成

说了上面一些口水话,总结就是,超出两行,一个字段一个字段的截取,直到小于等于两行!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容