文本溢出插件jquery.dotdotdot.js使用方法详解


Posted in jQuery onJune 22, 2017

插件下载地址: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>

以上所述是小编给大家介绍的文本溢出插件jquery.dotdotdot.js使用方法详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
jQuery实现简单弹幕制作
Dec 10 jQuery
jQuery实现可拖动进度条实例代码
Jun 21 #jQuery
基于jquery日历价格、库存等设置插件
Jul 05 #jQuery
jquery.validate表单验证插件使用详解
Jun 21 #jQuery
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 #jQuery
jquery加载单文件vue组件的方法
Jun 20 #jQuery
jQuery 实现双击编辑表格功能
Jun 19 #jQuery
jQuery实现简单的手风琴效果
Apr 17 #jQuery
You might like
PHP Undefined index报错的修复方法
2011/07/17 PHP
用PHP+MySQL搭建聊天室功能实例代码
2012/08/20 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
总结PHP内存释放以及垃圾回收
2018/03/29 PHP
JavaScript在IE中“意外地调用了方法或属性访问”
2008/11/19 Javascript
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
Js nodeType 属性全面解析
2013/11/14 Javascript
js 动态加载事件的几种方法总结
2013/12/25 Javascript
借助javascript代码判断网页是静态还是伪静态
2014/05/05 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
React.js入门实例教程之创建hello world 的5种方式
2016/05/11 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
JavaScript 巧学巧用
2017/05/23 Javascript
Vue动态组件实例解析
2017/08/20 Javascript
详解webpack require.ensure与require AMD的区别
2017/12/13 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
使用Python的PEAK来适配协议的教程
2015/04/14 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
Python 加密与解密小结
2018/12/06 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
Django csrf 两种方法设置form的实例
2019/02/03 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
Python3实现计算两个数组的交集算法示例
2019/04/03 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
领导证婚人证婚词
2014/01/13 职场文书
单位实习证明怎么写
2014/01/17 职场文书
优秀员工表扬信
2014/01/17 职场文书
医学生求职自荐书
2014/06/12 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
冰峪沟导游词
2015/02/09 职场文书
如何Tomcat中使用ipv6地址
2022/05/06 Servers