插件下载地址：https://github.com/FrDH/jQuery.dotdotdot
引入jQuery.js和jquery.dotdotdot.js
<script type="text/javascript" src="https://www.jb51.net/jquery.js"></script> <script type="text/javascript" src="https://www.jb51.net/jquery.dotdotdot.js"></script>
给包含文本的元素定一个宽高，当文本超过这个高度后会触发效果
变成省略号：
<div> 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试 </div> <script type="text/javascript"> $(function(){ $(".box").dotdotdot(); }) </script>
有省略号加自己定义内容：
<div> 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试 <span><a>read more</a></span> </div> <script type="text/javascript"> $(function(){ $(".box02").dotdotdot({ after: 'a' }); }); </script>
有展开/收起 按钮:
<div> 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试 </div> <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 = $('.box03'); $dot.append( ' <a href="#" ><span>[ + ]</span><span>[ - ]</span></a>' ); function createDots() { $dot.dotdotdot({ after: 'a.toggle' }); } function destroyDots() { $dot.trigger( 'destroy' ); } createDots(); $dot.on( 'click', 'a.toggle', function() { $dot.toggleClass( 'opened' ); if ( $dot.hasClass( 'opened' ) ) { destroyDots(); } else { createDots(); } return false; } ); </script>
以上所述是小编给大家介绍的文本溢出插件jquery.dotdotdot.js使用方法详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: