文本溢出插件jquery.dotdotdot.js使用方法详解
时间：2021-01-30 10:26:07|栏目：jquery|点击： 次
插件下载地址：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" 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>
