jquery.ellipsis根据宽度(不是字数)进行内容截断,支持多行内容
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根据宽度(不是字数)进行内容截断,支持多行内容的更多相关文章
- jquery.ellipsis.js段落超出省略号插件
为了实现在段落尾部超出文字替换为省略号,自己写的插件,并作了简单的优化. 下面给出脚本演示页面及注释,在此之前介绍一下插件参数 1.lineNum:数字.限制段落的行数 2.english:布尔.英文 ...
- jquery完美实现textarea输入框限制字数
<html> <head> <title> jquery完美实现textarea输入框限制字数</title> <meta http-equiv= ...
- jQuery计算文本宽度和input标签根据输入字符动态自适应宽度的实现
jQuery计算文本宽度的原理是利用html提供的<pre>标签,向dom中动态添加<pre>标签,标签里的内容就是要测试长度的文本,获取完长度之后再删除刚才添加的<pr ...
- JQUERY 获取 DIV 宽度与高度(width,padding,margin,border)
一般讲的宽度指的是内容宽度,但一个 div 的实际宽度不仅只于内容宽度,尤其在做 CSS 排版时更不能搞错,必须同时考虑 Padding.Border 与 Margin 的宽度,四个加起来才是 di ...
- jquery插件——仿新浪微博限制输入字数的textarea
内容链接地址:http://www.cnblogs.com/jone-chen/p/5213851.html: <!DOCTYPE html> <html> <head& ...
- jquery检测屏幕宽度并跳转页面
jquery检测屏幕宽度并刷新页面 var owidth = ($(window).width()); //浏览器当前窗口可视区域宽度 if(owidth<640){//小于640跳转一个网址, ...
- jquery里的宽度详解
在jQuery中,width()方法用于获得元素宽度:innerWidth()方法用于获得包括内边界(padding)的元素宽度,outerWidth()方法用于获得包括内边界(padding)和边框 ...
- JQuery获取元素宽度.width()与.css(‘width’)两个函数的区别
整理翻译自:http://blog.jquery.com/2012/08/16/jquery-1-8-box-sizing-width-csswidth-and-outerwidth/ 大意是: 在J ...
- JavaScript和jquery中的宽度
Javascript: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document ...
随机推荐
- django-celery定时任务以及异步任务and服务器部署并且运行全部过程
Celery 应用Celery之前,我想大家都已经了解了,什么是Celery,Celery可以做什么,等等一些关于Celery的问题,在这里我就不一一解释了. 应用之前,要确保环境中添加了Celery ...
- Perfect Groups CodeForces - 980D
链接 题目大意: 定义一个问题: 求集合$S$的最小划分数,使得每个划分内任意两个元素积均为完全平方数. 给定$n$元素序列$a$, 对$a$的所有子区间, 求出上述问题的结果, 最后要求输出所有结果 ...
- ECharts学习(1)--toolbox(工具栏)
1. toolbox:这是ECharts中的工具栏.内置有导出图片.数据视图.动态类型切换.数据区域缩放.重置五个工具. 2. toolbox中的属性,不包含五个工具.里面最主要的就是feature这 ...
- python-day12--函数进阶
1.命名空间: 分三种:全局命名空间,局部命名空间,内置命名空间. 加载顺序:内置命名空间→全局命名空间→局部命名空间 取值顺序:局部命名空间→全局命名空间→内置命名空间 2.作用域: 作用域就是作用 ...
- html5阴影
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> < ...
- python 绘图 异常点绘制使用 ax.plot(abnormal_points['ds'], abnormal_points['y'], "rX", label='abnormal points')
from matplotlib import pyplot as plt def my_plot(title, m, fcst, ax=None, uncertainty=True, plot_cap ...
- 我所理解的event loop
灵魂三问 JS为什么是单线程的 我们都知道,JS是单线程的语言,那为什么呢?我的理解是JS设计之初就是为了在浏览器端完成DOM操作和一些简单交互的,既然涉及到DOM操作如果是多线程就会带来复杂的同步问 ...
- react中为什么要使用immutable
因为在react中,react的生命周期中的setState()之后的shouldComponentUpdate()阶段默认返回true,所以会造成本组件和子组件的多余的render,重新生成virt ...
- document.write vs document.getElementById
document.write: JavaScript中对document.open所开启的文档流(document stream操作的API方法,它能够直接在文档流中写入字符串,一旦文档流已经关闭,那 ...
- 深入理解java异常【绝对经典,推荐最少看五遍】
http://blog.csdn.net/hguisu/article/details/6155636 补充:检查异常(checkedException)与运行异常,什么时候throw,什么时候thr ...