jquery.ellipsis

自动计算内容宽度(不是字数)截断,并加上省略号,内容不受中英文或符号限制。

如果根据字数来计算的话,因为不同字符的宽度并不相同,比如l和W,特别是中英文,最终内容宽度会有很大的差异。

jquery.ellipsis.js 依赖jquery,使用方式

$(dom).ellipsis({maxWidth:120,maxLine:2});

maxWidth,最大宽度 maxLine,最大亮度,标题啊什么的显示通常需要支持多行内容显示。默认为1

jquery.ellipsis.unobtrusive.js 依赖jquery.ellipsis.js,非必须项,这个是用来支持用data-标签来控制行为 使用方式:

<p data-ellipsis="true" data-ellipsis-max-width="200" data-ellipsis-max-line="2">
...
</p>

引入这个js即可自动根据元素上的data属性来处理,不需要写额外的脚本

源码及Demo下载:https://github.com/thinhunan/jquery.ellipsis

jquery.ellipsis根据宽度(不是字数)进行内容截断,支持多行内容的更多相关文章

  1. jquery.ellipsis.js段落超出省略号插件

    为了实现在段落尾部超出文字替换为省略号,自己写的插件,并作了简单的优化. 下面给出脚本演示页面及注释,在此之前介绍一下插件参数 1.lineNum:数字.限制段落的行数 2.english:布尔.英文 ...

  2. jquery完美实现textarea输入框限制字数

    <html> <head> <title> jquery完美实现textarea输入框限制字数</title> <meta http-equiv= ...

  3. jQuery计算文本宽度和input标签根据输入字符动态自适应宽度的实现

    jQuery计算文本宽度的原理是利用html提供的<pre>标签,向dom中动态添加<pre>标签,标签里的内容就是要测试长度的文本,获取完长度之后再删除刚才添加的<pr ...

  4. JQUERY 获取 DIV 宽度与高度(width,padding,margin,border)

    一般讲的宽度指的是内容宽度,但一个 div 的实际宽度不仅只于内容宽度,尤其在做 CSS 排版时更不能搞错,必须同时考虑 Padding.Border 与  Margin 的宽度,四个加起来才是 di ...

  5. jquery插件——仿新浪微博限制输入字数的textarea

    内容链接地址:http://www.cnblogs.com/jone-chen/p/5213851.html: <!DOCTYPE html> <html> <head& ...

  6. jquery检测屏幕宽度并跳转页面

    jquery检测屏幕宽度并刷新页面 var owidth = ($(window).width()); //浏览器当前窗口可视区域宽度 if(owidth<640){//小于640跳转一个网址, ...

  7. jquery里的宽度详解

    在jQuery中,width()方法用于获得元素宽度:innerWidth()方法用于获得包括内边界(padding)的元素宽度,outerWidth()方法用于获得包括内边界(padding)和边框 ...

  8. JQuery获取元素宽度.width()与.css(‘width’)两个函数的区别

    整理翻译自:http://blog.jquery.com/2012/08/16/jquery-1-8-box-sizing-width-csswidth-and-outerwidth/ 大意是: 在J ...

  9. JavaScript和jquery中的宽度

    Javascript: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document ...

随机推荐

  1. Deep Learning of Graph Matching 阅读笔记

    Deep Learning of Graph Matching 阅读笔记 CVPR2018的一篇文章,主要提出了一种利用深度神经网络实现端到端图匹配(Graph Matching)的方法. 该篇文章理 ...

  2. 在命令行中直接运行带main方法的java

    用了很久的java,基本都是交给服务器完成的执行,有page之类的入口,或者是在IDE工具中直接 Run As Java Application. 并且一直对安装java之后配置JAVA_HOME,p ...

  3. 一个SQL调优/优化(SQL TUNING)“小把戏”“哄得”小朋友挺满意

    前几天,去一个用户那里,解决完问题,和一个小朋友闲聊,他有点愁眉不展.郁郁寡欢的样子,似乎没心情和我说话,之前,他的话是最多的,见此状,我就问:怎么了?小朋友?,他说,这几天应用人员说他的某个模块的性 ...

  4. Elasticsearch单机下多实例配置

    ##################### Elasticsearch Configuration Example ##################### index.cache.field.ty ...

  5. javascript数据结构——栈

    栈是一种高效的数据结构,数据只能在栈顶添加或删除,所以这样操作很快,也很容易实现.栈的使用遍布程序语言实现的方方面面,从表达式求值到处理函数调用.接下来,用JavaScript实现一个栈的数据结构. ...

  6. svn: E200009: 'lib/systemd/system/dropbear@.service': a peg revision is not allowed here problem

    case: svn add lib/systemd/system/dropbear@.service svn: E200009: 'lib/systemd/system/dropbear@.servi ...

  7. sublime text3 设置快速生成代码

    依次打开 Tools > Developer(开发者选项) > new Snippet(新的代码块).可以看到注释的说明: <snippet> <content>& ...

  8. 【重大更新】DevExpress v17.2新版亮点—Bootstrap篇(二)

    用户界面套包DevExpress v17.2日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容.本文将介绍了Bootstrap Controls v17.2 的CardView.Charts ...

  9. Java实现责任链模式

    责任链模式: 将接受者对象连成一条链,并在该链上传递请求,直到一个几首这对象处理它.通过让更多对象有机会处理请求,避免了请求发送者和接受者之间的耦合. 责任链模式的优缺点: 优点:高内聚,低耦合.业务 ...

  10. avalonJS-源码阅读(2)

    上一篇文章讲述的avalon刷页面所用到的几个函数. 这篇则是主要讲avalon 对刷DOM刷出来的avalon自定义属性如何处理的. 目录[-] avalon页面处理(2)数据结构解析avalon标 ...