jQuery使用插件dotdotdot.js实现段落溢出显示省略号

博客开发过程中遇到需要把多行文字溢出显示省略号，试过很多方法，感觉最好用的就是dotdotdot插件，下面介绍给大家使用。

1.先上图给大家看看效果

2.使用方法

    引入插件

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

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

   插件官网下载地址： http://dotdotdot.frebsite.nl

CSS实例方法

jquery.dotdotdot添加元素：

1 2 3

< div  class = "dot-ellipsis" >      < p >Lorem Ipsum is simply dummy text.</ p > </ div >

添加jquery.dotdotdot与窗口大小改变时更新单元：

1 2 3

< div  class = "dot-ellipsis dot-resize-update" >      < p >Lorem Ipsum is simply dummy text.</ p > </ div >

添加jquery.dotdotdot与预定义的元素高度：

1 2 3

< div  class = "dot-ellipsis dot-height-50" >      < p >Lorem Ipsum is simply dummy text.</ p > </ div >

JavaScript方法

创建一个DOM元素，把一些文本和其它的HTML标记在这个“wrapper”。

html

1 2 3

< div  id = "wrapper" >      < p >Lorem Ipsum is simply dummy text.</ p > </ div >

js

1 2 3 4 5

$(document).ready( function () {      $( "#wrapper" ).dotdotdot({          // configuration goes here      }); });

3.配置选项

dotdotdot插件使用可以在配置对象中传递的几个选项。

所有选项（显示默认值）：

1. $(document).ready(function() {
2. $("#wrapper").dotdotdot({
3. /* The text to add as ellipsis. */
4. ellipsis : '... ',
5.  
6. /* How to cut off the text/html: 'word'/'letter'/'children' */
7. wrap : 'word',
8.  
9. /* Wrap-option fallback to 'letter' for long words */
10. fallbackToLetter: true,
11.  
12. /* jQuery-selector for the element to keep and put after the ellipsis. */
13. after : null,
14.  
15. /* Whether to update the ellipsis: true/'window' */
16. watch : false,
18. /* Optionally set a max-height, can be a number or function.
19. If null, the height will be measured. */
20. height : null,
21.  
22. /* Deviation for the height-option. */
23. tolerance : 0,
24.  
25. /* Callback function that is fired after the ellipsis is added,
26. receives two parameters: isTruncated(boolean), orgContent(string). */
27. callback : function( isTruncated, orgContent ) {},
28.  
29. lastCharacter : {
30.  
31. /* Remove these characters from the end of the truncated text. */
32. remove : [ ' ', ',', ';', '.', '!', '?' ],
33.  
34. /* Don't add an ellipsis if this array contains
35. the last character of the truncated text. */
36. noEllipsis : []
37. }
38. });

1. });

文章来源：http://www.tutiaoba.com/4.html