富文本超过省略号方案
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | // 富文本省略号 function richTextEllipsis(index = 0) { // 1.获取容器的高度---》220 // 判断p的内容高度是否大于剩余的高度,否则,就用总高度-p的真实高度(含padding) // 2.循环获取每一个p标签的高度 ---》230 // 3.容器高度-p的高度,得到剩余高度,如果当前p的高度大于剩余高度, // 就。。。,后面的p直接去掉 var _richText = $( '.rich-text' ).eq(index) var _cH = _richText.height() // 容器总高度 var _syH = _cH // 剩余高度 var _pIns = _richText.find( '.real-text' ).children( 'p' ) // 所有的p标签 var _pLen = _pIns.length var _isTrue = false for ( var i = 0; i < _pLen; i++) { if (_isTrue) { _pIns.eq(i).text( '' ) continue } var _pcH = _pIns.eq(i).outerHeight() // p标签的内容高度 if (_syH <= 0) { _pIns.eq(i).text( '' ) _isTrue = true continue } // 内容高度是否大于剩余高度,如果大于剩余高度,就截取 if (_pcH > _syH) { var _pCont = '' var a = 0 while (_pcH > _syH) { a++ if (/^(.)\1+$/.test(_pIns.eq(i).text())) { break } if (a > 200) { break } _pIns.eq(i).text(_pIns.eq(i).text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..." )); // 重新获取内容高度 _pcH = _pIns.eq(i).outerHeight() }; _isTrue = true } else { _syH -= _pIns.eq(i).outerHeight( true ) } } } |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)