js限制文字字数，超出用省略号......表示

最新推荐文章于 2023-02-06 15:00:36 发布

原创最新推荐文章于 2023-02-06 15:00:36 发布 · 1.6w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#js文字字数限制 #文字溢出

JavaScript 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一个基于jQuery实现的文本截断示例，当文本长度超过设定值时，多余部分用省略号代替，展示了HTML、CSS及JS的具体实现。

此方法基于jquery，不要忘记引入jQuery文件哦！！！

看代码：

html部分：

<div class="myTit">在很久很久以前，有一个古老又神秘的家族，他们有雪白的羽毛，无翅而能在空中飞翔.在很久很久以前，有一个个古老又神秘的家族，他们有雪白的羽毛，无翅而能在空中飞翔</div>

css部分：

.myTit {
            width:300px;
            line-height: 20px;
            font-size: 14px;
            background: lightblue;
            color:#333;
            padding:20px;
}

js部分：

$(".myTit").each(function(){
       var len=$(this).text().length;   //当前HTML对象text的长度
       if(len>30){
           var str="";
           str=$(this).text().substring(0,30)+"......";  //使用字符串截取，获取前30个字符，多余的字符使用“......”代替
           $(this).html(str);                   //将替换的值赋值给当前对象
       }
    });

最终效果：