插件下載地址：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>