这时我轻轻地闭上了眼睛，我好像来到童话世界，好像在和小鸟讨论秋天的美景，好像在和小草拍秋天的照片。农民伯伯在田野里收获了庄稼，果农们在果园里收获了果子，我们在学校里收获快乐、收获知识、收获成长。
插件下载地址：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" style="width:300px;height:100px;">
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
</div>
<script type="text/javascript">
$(function(){
$(".box").dotdotdot();
})
</script>
有省略号加自己定义内容：
<div class="box02" style="width:300px;height:100px;">
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
<span style="color:#ff0000;"><a style="color: #F4606C">read more</a></span>
</div>
<script type="text/javascript">
$(function(){
$(".box02").dotdotdot({
after: 'a'
});
});
</script>
有展开/收起 按钮:
<div class="box03" style="width:300px;height:100px;">
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
</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" rel="nofollow noopener noreferrer" 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使用方法详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
本文文本溢出插件jquery.dotdotdot.js使用方法详解到此结束。无形的爱、无处不在。那就是亲情。小编再次感谢大家对我们的支持！