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()
}
});

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值