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

jQuery使用插件dotdotdot.js实现段落溢出显示省略号
程序员.春光

2017.07.09 阅读 777 评论 1 喜欢 4


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


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


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


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,
  17. /* Optionally set a max-height, can be a number or function.
  18. If null, the height will be measured. */
  19. height : null,
  20.  
  21. /* Deviation for the height-option. */
  22. tolerance : 0,
  23.  
  24. /* Callback function that is fired after the ellipsis is added,
  25. receives two parameters: isTruncated(boolean), orgContent(string). */
  26. callback : function( isTruncated, orgContent ) {},
  27.  
  28. lastCharacter : {
  29.  
  30. /* Remove these characters from the end of the truncated text. */
  31. remove : [ ' ', ',', ';', '.', '!', '?' ],
  32.  
  33. /* Don't add an ellipsis if this array contains
  34. the last character of the truncated text. */
  35. noEllipsis : []
  36. }
  37. });
  38. });
jQuery开发笔记 转载请联系作者,并注明出处。

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

春光支付宝

支付宝

春光微信

微信


喜欢  |  4

1条评论


114.9***4.236   1楼 · 2017.07.09 10:36

推荐大家使用CSS实例方法,简单好用

2人赞