jquery实现字数限制，超过部分...代替，后缀点击展开，点击后展开全文

DQZ_cool

于 2018-02-24 08:50:30 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript

本文链接：https://blog.youkuaiyun.com/dqz1984wan/article/details/79358327

Javascript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的文本内容自动截断并在末尾添加展开链接的方法。当文本长度超过设定的最大显示字数时，多余的部分将被省略号替代，并自动追加一个点击展开的链接。通过这种方式，可以在不牺牲阅读体验的前提下展示长文本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script type="text/javascript">
    $(function(){
        $("p").each(function(){
            var maxwidth=60;//设置最多显示的字数
            var text=$(this).text();
            if($(this).text().length>maxwidth){
                $(this).text($(this).text().substring(0,maxwidth));
                $(this).html($(this).html()+"..."+"<a href='###'> 点击展开</a>");//如果字数超过最大字数，超出部分用...代替，并且在后面加上点击展开的链接；

            };
            $(this).find("a").click(function(){
                $(this).parent().text(text);//点击“点击展开”，展开全文
            })
        })
    })
</script>