文本溢出插件jquery.dotdotdot.js使用方法

最新推荐文章于 2025-06-28 09:08:10 发布

清木Moyu

最新推荐文章于 2025-06-28 09:08:10 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/sun124608666/article/details/73571764

本文介绍了一个实用的jQuery插件dotdotdot的使用方法。通过此插件可以轻松实现文本溢出时显示省略号的效果，并支持自定义内容如“阅读更多”链接及展开/收起按钮。文章提供了详细的代码示例。

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

插件下载地址：https://github.com/FrDH/jQuery.dotdotdot
引入jquery.js和jquery.dotdotdot.js

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dotdotdot.js"></script>

给包含文本的元素定一个宽高，当文本超过这个高度后会触发效果

变成省略号：

<div class="box" style="width:300px;height:100px;">
    测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
</div>

<script type="text/javascript">
    $(function(){  
        $(".box").dotdotdot();  
    })      
</script>

有省略号加自己定义内容：

<div class="box02" style="width:300px;height:100px;">
    测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
    <span style="color:#ff0000;"><a style="color: #F4606C">read more</a></span>
</div>

<script type="text/javascript">
    $(function(){  
        $(".box02").dotdotdot({  
            after: 'a'  
        });  
    });
</script>

有展开/收起按钮:

<div class="box03" style="width:300px;height:100px;">
    测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
</div>

<style type="text/css">
.opened{height: auto;}  
.toggle .close,.opened .toggle .open{display: none;}  
.toggle .opened,.opened .toggle .close{display: inline;}    
</style>

<script type="text/javascript">
    var $dot = $('.box03');
    $dot.append( ' <a class="toggle" href="#"><span class="open">[ + ]</span><span class="close">[ - ]</span></a>' );

    function createDots()
    {
        $dot.dotdotdot({  
            after: 'a.toggle'  
        });
    }
    function destroyDots() {
        $dot.trigger( 'destroy' );
    }
    createDots();

    $dot.on(  
            'click',  
            'a.toggle',  
            function() {
                $dot.toggleClass( 'opened' );

                if ( $dot.hasClass( 'opened' ) ) {
                    destroyDots();  
                } else {
                    createDots();  
                }
                return false;  
            }
    );
</script>