• JS文本中间显示省略号


    众所周知,文本溢出显示省略号用CSS就可以:

    单行文本:

    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display:block;

    多行文本:

    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    如果想中间显示省略号呢??

    现在需求是,一段文本很长,但最后有一个关键词很重要,而且改关键词有括号括起来的,需要显示出来,所以如果文本过长,不单只做省略号处理,还要把括号里面的内容显示出来。

    // 中间显示省略号,截取显示括号内容
    var str = $(".text").text();
    var last = 0;
    var all = str.length;
    var fisrt = str.substring(0,6);
    // 没有中文括号(
    if (str.lastIndexOf('(') == -1) {
        // 也没有英文括号(
        if (str.lastIndexOf('(') == -1) {
            last = all - 5;
        }else{
            // 有英文括号(,就从英文括号开始截取
            last = str.lastIndexOf('(');
        }
    }else{
        last = str.lastIndexOf('(');
    }
    // 如果长度大于13个字符才显示省略号
    if (all > 13) {
        $(".text").text(fisrt+" ... "+str.substring(last,all));
    }

    上面的代码意思是:如果文本长度大于13个字符、文本内包含中文或英文括号就会截取括号到最后一个字符的内容,默认截取前6个字符跟省略号...拼接起来,得到最终的中间省略号,前面6个字,后显示括号内容的效果。

    最后:

    网上看了好像css没有显示前面跟后面并且中间显示省略号的属性,所以用js截取拼接得到对应的效果。

  • 相关阅读:
    tyvj1463 智商问题
    P1070 道路游戏
    P1862 输油管道问题
    P1875 佳佳的魔法药水
    P1498 南蛮图腾
    P1489 猫狗大战
    P1395 会议(求树的重心)
    P2285 [HNOI2004]打鼹鼠
    P3819 松江1843路(洛谷月赛)
    P3818 小A和uim之大逃离 II(洛谷月赛)
  • 原文地址:https://www.cnblogs.com/zhengshize/p/8297612.html
Copyright © 2020-2023  润新知