首页 > 代码库 > JQ多行文本溢出省略号插件
JQ多行文本溢出省略号插件
一、引入jq和jquery.dotdotdot.min.js
二、html结构
点击之后
<div class="detail-content">
<p>新房和二手房各有优缺点。主要有一下区别:</p>
<p> 1、交易条件不同 </p>
<p>开发商将新房出售给购房者的前提条件是:开发商需要 取得五证二书。</p>
<p> 2、买房首付、贷款额度不同 </p>
<p>开发商将新房出售给购房者的前提条件是:开发商需要 取得五证二书。</p>
<p> 3、交易条件不同 </p>
<p>开发商将新房出售给购房者的前提条件是:开发商需要 取得五证二书。</p>
</div>
<!--全部按钮-->
<div class="all-btn">
<button type="button">全部</button>
</div>
三、css样式
//答内容 .detail-content { padding-left: 0.4rem; height: 1.3rem; overflow: hidden; p { font-size: 0.28rem; line-height: 1.5; color: @color-txt-subtitle; } } .opened{ height: auto; }
四、插件使用
//点击全部按钮,展开内容 var $dot = $(‘.detail-content‘); $dot.dotdotdot({}); $("#hot-questio-list").on(‘click‘,‘button‘,function() { var $detail=$(this).parent().siblings(‘.detail-content‘); $detail.toggleClass(‘opened‘); if($dot.hasClass(‘opened‘)) { $detail.trigger(‘destroy‘); $(this).text(‘折叠‘); } else { $detail.dotdotdot({}); $(this).text(‘全部‘); } return false; } );
JQ多行文本溢出省略号插件
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。