插件下載地址：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="#" rel="external nofollow" ><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>以上所述是小編給大家介紹的文本溢出插件jquery.dotdotdot.js使用方法詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
