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. Razor及HtmlHelper学习笔记

    Razor 不是编程语言.它是服务器端标记语言. 什么是Razor? Razor 是一种允许您向网页中嵌入基于服务器的代码(Visual Basic 和 C#)的标记语法. 当网页被写入浏览器时,基于 ...

  2. php date()

    PHP Date() 函数把时间戳格式化为更易读的日期和时间. date(format,timestamp) format:显示时间的格式.  timestamp:可选.规定时间戳.默认是当前时间和日 ...

  3. 一、重写(覆盖)override

    一.重写(覆盖)override 子类可以继承父类对象的方法,在继承后,重复提供该方法,就叫做方法的重写,又叫做覆盖override package property; //父类对象 public c ...

  4. dubbo为consumer创建代理

    ReferenceConfig.init()方法中获取到了最终的代理对象,先观察一下代理对象的视图. 默认使用javassist生成动态类,可配置proxy为jdk,则使用jdk动态代理: <d ...

  5. js设计模式-观察者模式

    定义: 观察者模式又叫发布订阅模式,它定义了对象间的一种一对多的依赖关系.观察者模式让两个对象松耦合地联系在一起,虽然不太清楚彼此的细节,但这不影响他们之间的互相通信. 思路 定义一个对象,在对象中实 ...

  6. 062——VUE中vue-router之命名视图的实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. jsp jstl的使用

    1)下载jstl.jar和standard.jar文件,然后将其拷贝到tomcat的lib目录下. 具体的下载地址:http://mirrors.ccs.neu.edu/Apache/dist/jak ...

  8. learning armbian steps(2) ----- armbian 镜像编译

    参考:https://docs.armbian.com/Developer-Guide_Build-Preparation/ 通过如下指令进行编译: apt-get -y -qq install gi ...

  9. SQL Server 调优系列基础篇 - 索引运算总结

    前言 上几篇文章我们介绍了如何查看查询计划.常用运算符的介绍.并行运算的方式,有兴趣的可以点击查看. 本篇将分析在SQL Server中,如何利用先有索引项进行查询性能优化,通过了解这些索引项的应用方 ...

  10. 大数据技术Hadoop面试题

    1. 下面哪个程序负责 HDFS 数据存储.答案C datanode a)NameNodeb)Jobtrackerc)Datanode d)secondaryNameNodee)tasktracker ...