Home >Web Front-end >JS Tutorial >Detailed explanation of how to use the text jquery.dotdotdot.js plug-in

Detailed explanation of how to use the text jquery.dotdotdot.js plug-in

小云云
小云云Original
2018-01-06 10:58:502630browse

This article mainly introduces the detailed explanation of how to use the text overflow plug-in jquery.dotdotdot.js. Friends in need can refer to it. I hope it can help everyone.

Plug-in download address: https://github.com/FrDH/jQuery.dotdotdot

Introducing jQuery.js and jquery.dotdotdot.js


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

Set a width and height for the element containing text. When the text exceeds this height, the effect will be triggered.

turns into an ellipsis:


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

With ellipsis and self-defined content:


<p class="box02" style="width:300px;height:100px;">
 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
 <span style="color:#ff0000;"><a style="color: #F4606C">read more</a></span>
</p>
<script type="text/javascript">
 $(function(){ 
  $(".box02").dotdotdot({ 
   after: &#39;a&#39; 
  }); 
 });
</script>

With expand/collapse button:


<p class="box03" style="width:300px;height:100px;">
 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
</p>
<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 = $(&#39;.box03&#39;);
 $dot.append( &#39; <a class="toggle" href="#" rel="external nofollow" ><span class="open">[ + ]</span><span class="close">[ - ]</span></a>&#39; );
 function createDots()
 {
  $dot.dotdotdot({ 
   after: &#39;a.toggle&#39; 
  });
 }
 function destroyDots() {
  $dot.trigger( &#39;destroy&#39; );
 }
 createDots();
 $dot.on( 
   &#39;click&#39;, 
   &#39;a.toggle&#39;, 
   function() {
    $dot.toggleClass( &#39;opened&#39; );
    if ( $dot.hasClass( &#39;opened&#39; ) ) {
     destroyDots(); 
    } else {
     createDots(); 
    }
    return false; 
   }
 );
</script>

Related recommendations:

jquery plug-in canvaspercent.js implementation example sharing of percentage round cake effect

Sharing of jQuery plug-in DataTables paging development technology

Detailed explanation of jquery plug-in jquery.viewport.js

The above is the detailed content of Detailed explanation of how to use the text jquery.dotdotdot.js plug-in. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn