html文字外溢显示信息省略标识符的两种常见处理

方式1:应用CSS外溢省略的方法处理

处理实际效果以下:

css编码:         

display: -webkit-box;
            display: -moz-box;
            white-space: pre-wrap;
            word-wrap: break-word;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp:2;   /*显示信息行数*/

方式2:应用jQuery截取更换文字內容的方法处理

处理实际效果以下:

 js编码:

$(".text").each(function() {
    if ($(this).text().length > 20) {//规定篇幅超过20才开展篇幅更换
        $(this).html($(this).text().replace(/\s+/g, "").substr(0, 80) + "...")
        //从0到80刚开始更换,将剩下文字內容更换为"..."
    }
})

上述两种方式功效在文字內容的类名便可。

总结

以上所述是网编给大伙儿详细介绍的html文字外溢显示信息省略标识符的两种常见处理方式,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!