插件下载地址：https://github.com/FrDH/jQuery.dotdotdot
引入jQuery.js和jquery.dotdotdot.js
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.dotdotdot.js"></script>
给包含文本的元素定一个宽高，当文本超过这个高度后会触发效果
变成省略号：
<div class="box" >
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
</div>
<script type="text/javascript">
$(function(){
$(".box").dotdotdot();
})
</script>
有省略号加自己定义内容：
<div class="box02" >
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
<span ><a >read more</a></span>
</div>
<script type="text/javascript">
$(function(){
$(".box02").dotdotdot({
after: 'a'
});
});
</script>
有展开/收起 按钮:
<div class="box03" >
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
</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 class="toggle" href="#" rel="external nofollow" ><span class="open">[ + ]</span><span class="close">[ - ]</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使用方法详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对亿速云网站的支持！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
