【JS】截取字符串，超出显示省略号

ianutt

已于 2022-08-07 20:40:00 修改

阅读量890

点赞数

文章标签： javascript

于 2022-02-20 11:22:51 首次发布

本文链接：https://blog.csdn.net/ianutt/article/details/123028540

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

博客内容涉及字符串按字节长度截取的JavaScript实现，包括简单计算字节长度的函数和按指定字节截取的函数。同时，介绍了jQuery插件实现按行数截字的兼容性方案，适用于IE8+浏览器。示例中展示了如何限制描述文字的显示长度。

摘要由CSDN通过智能技术生成

按字符串长度截字

<style>
.description{ width:200px; word-break: break-all; }
</style>

<p class="description">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>

<script>
// 简单计算字节长度
String.getBlength = function (str) {
    for (var i = str.length, n = 0; i--; ) {
        n += str.charCodeAt(i) > 255 ? 2 : 1;
    }
    return n;
}

// 按指定字节截取字符串
String.cutByte = function (str, len, endstr) {
    var len = +len,
    endstr = typeof(endstr) == 'undefined' ? "..." : endstr.toString(),
    endstrBl = this.getBlength(endstr);
    function n2(a) {var n = a / 2 | 0; return (n > 0 ? n : 1)}//用于二分法查找
    if (!(str + "").length || !len || len <= 0) {
        return "";
    }
    if(len<endstrBl){
        endstr = "";
        endstrBl = 0;
    }
    var lenS = len - endstrBl,
    _lenS = 0,
    _strl = 0;
    while (_strl <= lenS) {
        var _lenS1 = n2(lenS - _strl),
        addn = this.getBlength(str.substr(_lenS, _lenS1));
        if (addn == 0) {return str;}
        _strl += addn
        _lenS += _lenS1
    }
    if(str.length - _lenS > endstrBl || this.getBlength(str.substring(_lenS-1))>endstrBl){
        return str.substr(0, _lenS - 1) + endstr
    }else{
        return str;
    }
}

function wordlimit(cname, wordlength) {
    var cname = document.getElementsByClassName(cname);
    for (var i = 0; i < cname.length; i++) {　
        var text = cname[i].innerHTML;
        // alert(text);
        // 判断字符串字节数是否小于等于wordlength，小于等于就不用截取，直接显示，大于wordlength就截取
        if (String.getBlength(text) <= wordlength) {
            cname[i].innerHTML = text;
        } else {
            // 截取指定长度的字符串
            var result = String.cutByte(text, wordlength, '');
            // alert(result);
            cname[i].innerHTML = result + '...';
        }
    }　　　　　
}

wordlimit('description', 60)
</script>

按行数截字（兼容IE8+）
GitHub下载地址：https://github.com/STAR-ZERO/jquery-ellipsis/blob/master/src/jquery.ellipsis.js

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.ellipsis.js"></script>
<style>
    .box{  width: 500px; background: #CCCCCC; line-height: 24px; font-size: 14px; }
</style>
<script>
    $(function(){
        $(".box").ellipsis({
            row:4
        })
    })
</script>
        
<div class="box">
    2017款奥迪 RS3 Limousine 由新上市的A3发展而来，因此新款A3 以及S3的新设计有诸多共同点，如新头灯、新一代家族式进气格栅，银色的格栅包围以及下方醒目的quattro标识拥有了更强的战斗气息。新车还配备了运动型侧裙、后扰流板，三厢版RS3同样短小精悍，不过遗憾的是此次与S3一样，还是没有两厢车型。尾部排气是RS车型惯用的大尺寸圆形排气管，采用双边共双出的布局，虽然没有用双排四出，但是大尺寸排气依然非常震撼。
</div>