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

最新推荐文章于 2023-01-17 15:04:29 发布

橙子_tong

最新推荐文章于 2023-01-17 15:04:29 发布

阅读量1.6w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： js文字字数限制文字溢出

本文链接：https://blog.youkuaiyun.com/weixin_42220533/article/details/80742601

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);                   //将替换的值赋值给当前对象
       }
    });

最终效果：