Ausführliche Erklärung zur Verwendung des Text-Plug-Ins jquery.dotdotdot.js

In diesem Artikel wird hauptsächlich die Verwendung des Textüberlauf-Plugins jquery.dotdotdot.js vorgestellt. Ich hoffe, dass es allen helfen kann.

Plug-in-Download-Adresse: https://github.com/FrDH/jQuery.dotdotdot

Wir stellen vor: jQuery.js und jquery.dotdotdot.js

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

Legen Sie eine Breite und Höhe für das Element fest, das Text enthält. Wenn der Text diese Höhe überschreitet, wird der Effekt

in eine Ellipse umgewandelt:

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

Es gibt Ellipsen und benutzerdefinierte Inhalte:

<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>

Es gibt Schaltflächen zum Erweitern/Reduzieren:

<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>

Verwandte Empfehlungen:

JQuery-Plugin, Canvaspercent.js-Implementierungsbeispiel-Sharing des prozentualen runden Kucheneffekts

JQuery-Plug-in DataTables-Paging-Entwicklungstechnologie-Sharing

Detaillierte Erläuterung des JQuery-Plug-ins jquery.viewport.js

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung des Text-Plug-Ins jquery.dotdotdot.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!