HTML中文本过长时自动隐藏末尾部分或中间等任意部分

一、

    一般情况下，HTML字符串过长时都会将超过的部分隐藏点，方法如下：

 

      设置CSS：

            .ellipsis-type{

max-width: 50px;                      //显示宽度
white-space: nowrap;                //文本不换行。
overflow: hidden;                       //超过部分隐藏

text-overflow: ellipsis;                //超过部分用...代替

                 cursor: pointer;                         //鼠标设置(不是必须)

}

    如果要查看整个字符串，可以引用popover

          <script src="/static/common/js/popover.js"></script>

    <tr class='file_name'>

    <td class="ellipsis" data-toggle="popover" data-content="{{ your value}}" data-placement="bottom" data-container="body" >your text</td>

    </tr>

二、

    上面是通过CSS隐藏末端字符串。如果末端字符串有参考价值，可以通过js将字串中间或前部用特定字符代替。

    $(".file_name").each(function(){                                                               //遍历file_name中的每个子元素
        var v = $(this).children('.ellipsis').text();
        if (v.length > 50)

{

                            // 用V的前20个字符+"......"+后15个字符代替V

    var new_value = v.substring(0,20)+'......'+v.substring(v.length-15,v.length);
$(this).children('.name').text(new_value); //设置新的text()
}
});

    对的，这种方法并不是将字符串中间部分隐藏掉，而是用新的值去替换原值在页面上的显示。