文本溢出插件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解析获取JSON数据
Apr 08 jQuery
jquery实现提示语淡入效果
May 05 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
jQuery-App输入框实现实时搜索
Nov 19 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写UltraEdit插件脚本实现方法
2011/12/26 PHP
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
深入PHP许愿墙模块功能分析
2013/06/25 PHP
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
在Mac OS的PHP环境下安装配置MemCache的全过程解析
2016/02/15 PHP
laravel学习教程之关联模型
2016/07/30 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
总结PHP内存释放以及垃圾回收
2018/03/29 PHP
PHP中strtr与str_replace函数运行性能简单测试示例
2019/06/22 PHP
DB.ASP 用Javascript写ASP很灵活很好用很easy
2011/07/31 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
javascript中in运算符用法分析
2015/04/28 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
2016/01/14 Javascript
AngularJs验证重复密码的方法(两种)
2016/11/25 Javascript
JS键盘版计算器的制作方法
2016/12/03 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
微信小程序动态添加分享数据
2017/06/14 Javascript
angularjs下拉框空白的解决办法
2017/06/20 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
2019/04/28 Javascript
python 捕获shell脚本的输出结果实例
2017/01/04 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
python 产生token及token验证的方法
2018/12/26 Python
python实现猜拳小游戏
2020/04/05 Python
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
计算机系毕业生推荐信
2013/11/06 职场文书
小学英语教师先进事迹
2014/05/28 职场文书
质量在我心中演讲稿
2014/09/02 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
社区活动总结
2015/02/04 职场文书
食堂卫生管理制度
2015/08/04 职场文书
工作感想范文
2015/08/07 职场文书
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS