前端问题多行点点点的问题

anRui 发布于2019-08-20 18:24 / 3110人阅读

摘要：点点点获取字符串实际长度汉字英文点占点点点解决代码是多行可放的最大英文字符数可以自行调节进行适配

        //点点点获取字符串实际长度(汉字2,英文1,点占0.7)
        function get_strlength(str) {  
            var len = 0;
            if(str.match(/[^ -~]/g) == null) {
                len = str.length;
            } else {
                len = str.length + str.match(/[^ -~]/g).length;
            }
            if (str.match(/./g) != null){
                len -= (str.match(/./g).length * 0.3);
            }
            return len;
        }
        
        //点点点解决代码,maxLength是多行可放的最大英文字符数
        function getDotMessage(str , maxLength) {
            maxLength += (str.slice(0,maxLength).match(/./g) != null ? str.slice(0,maxLength).match(/./g).length : 0)*0.3;
            var str1 = "",
                endMaxLength = Math.floor(maxLength),
                maxLen = Math.floor(maxLength);
            if (get_strlength(str) >= maxLen){
                str1 = str.slice(0);
                while (get_strlength(str1) > endMaxLength){
                    str1 = str1.substring(0 , --maxLen);
                }
                return str1 + "..." ;
            }else {
                return str ;
            }
                        
        }

可以自行调节maxLength进行适配!

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84463.html

案例 - 收藏集 - 掘金

摘要：同行这么做使用实现圆形进度条前端掘金在开发微信小程序的时候，遇到圆形进度条的需求。实现也谈数组去重前端掘金的数组去重是一个老生常谈的话题了。百度前端技术学院自定义前端掘金一标签概念元素表示用户界面中项目的标题。闲话图片上传 - 掘金作者：孙辉，美团金融前端团队成员。15年毕业加入美团，相信技术，更相信技术只是大千世界里知识的一种，个人博客: https://sunyuhui.com ...

张金宝 2019-08-20 17:44 评论0 收藏0
案例 - 收藏集 - 掘金

摘要：同行这么做使用实现圆形进度条前端掘金在开发微信小程序的时候，遇到圆形进度条的需求。实现也谈数组去重前端掘金的数组去重是一个老生常谈的话题了。百度前端技术学院自定义前端掘金一标签概念元素表示用户界面中项目的标题。闲话图片上传 - 掘金作者：孙辉，美团金融前端团队成员。15年毕业加入美团，相信技术，更相信技术只是大千世界里知识的一种，个人博客: https://sunyuhui.com ...

huangjinnan 2019-08-29 12:54 评论0 收藏0
css - 收藏集 - 掘金

摘要：绝对底部前端掘金来自国外的设计达人，纯，可以实现当正文内容很少时，底部位于窗口最下面。有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。 CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案...

phpmatt 2019-08-29 12:41 评论0 收藏0
黑科技：CSS定制多行省略

摘要：多行省略就是大段文字后面的花式点点点。但它固定使用省略号，无法直接扩展。年月日，腾讯控股有限公司在香港联交所主板公开上市股票代号。转载请注明出处：http://hai.li/2017/03/08/css-... 什么是多行省略？ showImg(https://segmentfault.com/img/bVKr2N?w=660&h=325); 当字数多到一定程度就显示省略号点点点。最...

Leo_chen 2019-08-30 15:53 评论0 收藏0
黑科技：CSS定制多行省略

摘要：多行省略就是大段文字后面的花式点点点。但它固定使用省略号，无法直接扩展。年月日，腾讯控股有限公司在香港联交所主板公开上市股票代号。转载请注明出处：http://hai.li/2017/03/08/css-... 什么是多行省略？ showImg(https://segmentfault.com/img/bVKr2N?w=660&h=325); 当字数多到一定程度就显示省略号点点点。最...

wpw 2019-08-01 16:29 评论0 收藏0