快捷導(dǎo)航

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

更新時間：2017年06月22日 14:03:34 作者：第7維度

這篇文章主要介紹了文本溢出插件jquery.dotdotdot.js使用方法詳解,需要的朋友可以參考下

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

給包含文本的元素定一個寬高，當(dāng)文本超過這個高度后會觸發(fā)效果

變成省略號：

<div class="box" style="width:300px;height:100px;">
 測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試
</div>
<script type="text/javascript">
 $(function(){ 
  $(".box").dotdotdot(); 
 })  
</script>

有省略號加自己定義內(nèi)容：

<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使用方法詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: