• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    html文本溢出显示省略字符的两种常用解决方法

    方法一:使用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;   /*显示行数*/

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

    解决效果如下:

     js代码:

    $(".text").each(function() {
        if ($(this).text().length > 20) {//要求字数大于20才进行字数替换
            $(this).html($(this).text().replace(/\s+/g, "").substr(0, 80) + "...")
            //从0到80开始替换,将剩余文本内容替换为"..."
        }
    })

    上述两种方法作用在文本内容的类名即可。

    总结

    以上所述是小编给大家介绍的html文本溢出显示省略字符的两种常用解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

    上一篇:HTML如何在两个div标签中间画一条竖线
    下一篇:HTML页面原生VIDEO标签隐藏下载按钮功能
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯

    时间:9:00-21:00 (节假日不休)

    地址:江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

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