html文本溢出显示省略字符的两种常用解决方法

2022-10-8 18:27| 查看: 2436 |来源: 互联网

html文本溢出显示省略字符的两种常用解决方法，附css样式代码和js代码...

解决效果如下：

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;   /*显示行数*/

方法二：使用jQuery截取替换文本内容的方式解决

解决效果如下：

html文本溢出显示省略字符的两种常用解决方法

js代码：
$(".text").each(function() {
    if ($(this).text().length > 20) {//要求字数大于20才进行字数替换
        $(this).html($(this).text().replace(/\s+/g, "").substr(0, 80) + "...")
        //从0到80开始替换，将剩余文本内容替换为"..."
    }
})
上述两种方法作用在文本内容的类名即可。

tag标签:html 省略字符

本文最后更新于 2022-10-8 18:27，某些文章具有时效性，若有错误或已失效，请在网站留言或联系站长：17tui@17tui.com

·END·

站长网微信号：w17tui，关注站长、创业、关注互联网人 - 互联网创业者营销服务中心

免责声明：本站部分文章和图片均来自用户投稿和网络收集，旨在传播知识，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系我们及时修正或删除。谢谢！

下一篇：HTML页面原生VIDEO标签隐藏下载按钮功能上一篇：Unicode中的数学符号小结

17站长网微信二维码

始终以前瞻性的眼光聚焦站长、创业、互联网等领域，为您提供最新最全的互联网资讯，帮助站长转型升级，为互联网创业者提供更加优质的创业信息和品牌营销服务，与站长一起进步！让互联网创业者不再孤独！

扫一扫，关注站长网微信

html文本溢出显示省略字符的两种常用解决方法

大家都在看

相关分类

热门排行

最近更新