这是一个笔记博客

分类标签

当前:首页 > 文本溢出解决方案---jquery-dotdotdot插件的使用方法

文本溢出解决方案---jquery-dotdotdot插件的使用方法

2018-06-04 13:40    浏览量:0    作者

插件下截地址:https://github.com/FrDH/jQuery.dotdotdot

在文件头引入jquery和jquery.dotdotdot.js

要能看到效果,DIV的高度貌似要超过了一定的值以上。这个值不固定,根据宽度而定,如果没超过这个值文本直接全变成一个省略号

--------------------------------------------------------------------------------------------------------------------------------

方式一:超出DIV部分变成省略号

 

[html] view plain copy
  1. <span style="font-family:Microsoft YaHei;font-size:14px;"><script>  
  2.     $(function(){  
  3.         $("#div1").dotdotdot();  
  4.     })  
  5. </script></span>  

-------------------------------------------------------------------------------------------------------------------

方式二:有省略号加自己定义内容

 

#div2:

 

[html] view plain copy
  1. <span style="font-family:Microsoft YaHei;font-size:14px;"><div id="div2">  
  2.     咖啡是甜的,也是苦的,可以品茶一个人的内心,是着急喝,还是慢慢的品尝,品的不是味道,而是巡查昨天的事情,阅读一个人的风景,  
  3.     找到那个昨天的失去,找到那个失去的自己,翻阅心灵的海洋,大海的灵魂,只为咆哮眼神的酸甜,生活的流行苦辣。  
  4.     咖啡是甜的,也是苦的,可以品茶一个人的内心,是着急喝,还是慢慢的品尝,品的不是味道,而是巡查昨天的事情,阅读一个人的风景,  
  5.     找到那个昨天的失去,找到那个失去的自己,翻阅心灵的海洋,大海的灵魂,只为咆哮眼神的酸甜,生活的流行苦辣。  
  6.     咖啡是甜的,也是苦的,可以品茶一个人的内心,是着急喝,还是慢慢的品尝,品的不是味道,而是巡查昨天的事情,阅读一个人的风景,  
  7.     找到那个昨天的失去,找到那个失去的自己,翻阅心灵的海洋,大海的灵魂,只为咆哮眼神的酸甜,生活的流行苦辣。  
  8.     咖啡是甜的,也是苦的,可以品茶一个人的内心,是着急喝,还是慢慢的品尝,品的不是味道,而是巡查昨天的事情,阅读一个人的风景,  
  9.     找到那个昨天的失去,找到那个失去的自己,翻阅心灵的海洋,大海的灵魂,只为咆哮眼神的酸甜,生活的流行苦辣。  
  10.     <span style="color:#ff0000;"><a style="color: #F4606C">read more</a></span>  
  11.   
  12. </div></span>  

在DIV文本的尾部加入自己想要的标签和DIV。
 

 

 

[html] view plain copy
  1. <span style="font-family:Microsoft YaHei;"><script>  
  2.     $(function(){  
  3.         $("#div2").dotdotdot({  
  4.             after: 'a'  
  5.         });  
  6.     })  
  7. </script></span>  


 

 

-------------------------------------------------------------------------------------------------------------------------------------------

方式三:有展开/收起 按钮

CSS:

 

[html] view plain copy
  1. <span style="font-family:Microsoft YaHei;font-size:14px;">        /*展开的时候,让窗口高度自己自适应 ,代替固定高度*/  
  2.         .opened{  
  3.             height: auto;  
  4.         }  
  5.   
  6.         .toggle .close,  
  7.         .opened .toggle .open  
  8.         {  
  9.             display: none;  
  10.         }  
  11.          .toggle .opened,  
  12.         .opened .toggle .close  
  13.         {  
  14.             display: inline;  
  15.         }</span>  


JS:

 

 

[html] view plain copy
  1. <span style="font-family:Microsoft YaHei;font-size:14px;"><script>  
  2.   
  3.     var $dot = $('#div3');  
  4.     $dot.append( ' <a class="toggle" href="#"><span class="open">[ + ]</span><span class="close">[ - ]</span></a>' );  
  5.   
  6.     function createDots()  
  7.     {  
  8.         $dot.dotdotdot({  
  9.             after: 'a.toggle'  
  10.         });  
  11.     }  
  12.     function destroyDots() {  
  13.         $dot.trigger( 'destroy' );  
  14.     }  
  15.     createDots();  
  16.   
  17.     $dot.on(  
  18.             'click',  
  19.             'a.toggle',  
  20.             function() {  
  21.                 $dot.toggleClass( 'opened' );  
  22.   
  23.                 if ( $dot.hasClass( 'opened' ) ) {  
  24.                     destroyDots();  
  25.                 } else {  
  26.                     createDots();  
  27.                 }  
  28.                 return false;  
  29.             }  
  30.     );  
  31. </script></span>  


转自---https://blog.csdn.net/qq_30668579/article/details/51177126

推荐阅读