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

插件下载地址: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 
 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
 /div 
 script type="text/javascript" 
 ${ 
 $.dotdotdot; 
 /script 

有省略号加自己定义内容:

 div 
 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
 span a read more /a /span 
 /div 
 script type="text/javascript" 
 ${ 
 $.dotdotdot; 
 /script 

有展开/收起 按钮:

 div 
 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
 /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 = $;
 $dot.append
 $dot.dotdotdot {
 $dot.trigger;
 createdots;
 $dot.on {
 $dot.toggleclass;
 if  ) {
 destroydots; 
 } else {
 createdots; 
 return false; 
 /script 

新闻聚焦
猜你喜欢
热门推荐
  • Python  操作 MySQL 数据库

    Python 操作 MySQL 数据库

    import pymysql #python3conn=pymysql.connect #字符集不是必须的cursor = conn.cursorsql="se.........

    2019-08-15 来源: 浏览:10 次

    分享
  • 文本溢出插件jquery.dotdotdot.js使用方法

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

    插件下载地址:https://github.com/frdh/jquery.dotdotdot引入jquery.js和jquery.dotdotdot.jssc.........

    2019-08-15 来源: 浏览:86 次

    分享
  • PS怎么利用路径快速画出简单的花朵

    PS怎么利用路径快速画出简单的花朵

    1、调出椭圆工具,并且把工具模式设置为:路径2、按ctrl+r,调出标尺,再拉出两条参考线,这两条参考线相交;再调出椭圆工具,以相交点为中心画出一个正圆形路径。...

    2019-08-15 来源: 浏览:61 次

    分享
  • 枚举getClass、getDeclaringClass区别

    枚举getClass、getDeclaringClass区别

    枚举getClass、getDeclaringClass区别 1):“不含抽象方法”,所有枚举常量未重写方法,的class getClass与getDeclar.........

    2019-08-15 来源: 浏览:16 次

    分享
  • 选择排序的理解

    选择排序的理解

    .........

    2019-08-13 来源: 浏览:47 次

    分享
  • C++ 单例模式(懒汉、饿汉模式)

    C++ 单例模式(懒汉、饿汉模式)

    // 饿汉模式的关键:初始化即实例化singelton *singelton::single = new singelton;int singelton::m_.........

    2019-08-13 来源: 浏览:89 次

    分享
  • 洛谷 P1141 01迷宫题解

    洛谷 P1141 01迷宫题解

    对于60\%60%的数据,n 100,m 100n 100,m 100;对于100\%100%的数据,n 1000,m 100000n 1000,m 10000.........

    2019-08-13 来源: 浏览:57 次

    分享
  • Java连载12

    Java连载12

    一、集成开发环境1.什么是集成开发环境集成开发环境可以使软件开发变得更简单没有ide工具:i.需要安装jdk,需要配置环境变量;需要手动的将java源文件编译生.........

    2019-08-13 来源: 浏览:43 次

    分享
  • c#使用SoundPlayer播放wav格式音频

    c#使用SoundPlayer播放wav格式音频

    1.引用system.media名称空间下的类soundplayer soundplayer player = new soundplayer;2.方法.........

    2019-08-08 来源: 浏览:15 次

    分享
  • bin文件夹下的某个dll总是自动刷新为

    bin文件夹下的某个dll总是自动刷新为

    如上图所示,一般这种问题都是dll版本和配置文件中的dll版本对应不上才引起的,可以通过替换对应版本的dll或者修改配置文件中的版本号即可。然而我的情况是:修复...

    2019-08-08 来源: 浏览:48 次

    分享
  • WeihanLi.Npoi 导出支持自定义列内容啦

    WeihanLi.Npoi 导出支持自定义列内容啦

    之前也有网友给提出过希望列合并或者自定义列内容的 issue 或请求,起初因为自己做 weihanli.npoi 这个扩展的最初目的是导入导出的简单化,使用这个.........

    2019-08-08 来源: 浏览:51 次

    分享
  • 1. mvc 树形控件tree + 表格jqgrid 显示界

    1. mvc 树形控件tree + 表格jqgrid 显示界

    [{"id":"1","text":"系统管理","value":"1","parentnodes":"0","showcheck":false,"isexpa.........

    2019-08-08 来源: 浏览:25 次

    分享
换一换
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。