jquery插件--多行文本缩略
1、webkit内核多行缩略样式
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
2、使用javascript做兼容
/**
* 多行缩略
* @author rubekid
* {
* maxLine:2, //最多显示行默认为1
* ellipsisChar:"..." //省略占位符,建议不设置,与原生一致
* }
*/
(function ($) { var supportLineClamp = function(){
var div = document.createElement('div');
var style = computeStyle(div);
return style!=null && "-webkit-line-clamp" in style;
}(); function computeStyle(el){
if(window.getComputedStyle){ return window.getComputedStyle(el,null);
}
return el.currentStyle;
} /**
* 设置样式
* @param Element el
* @param JSON css
*/
function setStyle(el, css){
for(var i in css){
el.style[i] = css[i];
}
} function ellipsis($elem, options) {
var maxLine = options.maxLine ||1;
var lineHeight = parseFloat($elem.css("line-height"));
var maxHeight = maxLine * lineHeight;
var content = $elem.text();
var $temp_elem = $elem.clone(false)
.css({"visibility": "hidden","overflow":"visible", "height":"auto"})
.appendTo($elem.parent());
$temp_elem.text(content);
var height = $temp_elem.height();
if(height > maxHeight){
if(supportLineClamp){
setStyle($elem.get(0), {
"text-overflow":"ellipsis",
"display":"-webkit-box",
"-webkit-line-clamp":maxLine,
"-webkit-box-orient":"vertical",
"overflow":"hidden"
}); }
else{ var _width = $elem.width();
var ellipsis_char = options.ellipsisChar;
var lineCount = 0;
var texts = content.split("\n", maxLine);
var newTexts = [];
for(var i=0; i<texts.length; i++){
var text = texts[i];
$temp_elem.text(text);
height = $temp_elem.height();
var _lineCount = height / lineHeight;
if(lineCount + _lineCount >= maxLine){
text = text + ellipsis_char;
$temp_elem.text(text);
text = text.replace(' ',' '); //for fix white-space bug
$temp_elem.css({"whiteSpace": "nowrap","width":"auto" });
var max = (maxLine - lineCount) * _width;
var width = $temp_elem.get(0).scrollWidth;
if(width > max){
var stop = Math.floor(text.length * max / width); // for performance while content exceeding the limit substantially
var temp_str = text.substring(0,stop) + ellipsis_char;
width = $temp_elem.text(temp_str).get(0).scrollWidth;
if(width > max){
while (width > max && stop > 1) {
stop--;
temp_str = text.substring(0, stop) + ellipsis_char;
width = $temp_elem.text(temp_str).width();
}
}
else if(width < max){
while (width < max && stop < text.length) {
stop++;
temp_str = text.substring(0, stop) + ellipsis_char;
width = $temp_elem.text(temp_str).get(0).scrollWidth;
}
if(width > max){
temp_str = text.substring(0,stop -1)+ellipsis_char;
}
} newTexts.push(temp_str.replace(' ',' '));
}
else{
newTexts.push(text);
}
break;
}
newTexts.push(text);
lineCount +=_lineCount; }
text = newTexts.join("\n");
$temp_elem.text(text).css(
{"whiteSpace": "","width": $elem.width() }
);
var lastIndex = text.length;
var _temp_str = text;
height = $temp_elem.height();
while(height > maxHeight){
_temp_str = text.substring(0, --lastIndex) + ellipsis_char;
$temp_elem.text(_temp_str);
height = $temp_elem.height();
} $elem.text(_temp_str);
}
}
$temp_elem.remove();
} var defaults = {
maxLine: 1,
ellipsisChar:'...'
}; $.fn.ellipsis = function (options) {
return this.each(function () {
var $elem = $(this);
var opts = $.extend({}, defaults, options);
ellipsis($elem, opts);
});
}; $.fn.ellipsis.options = defaults;
})(jQuery);
jquery插件--多行文本缩略的更多相关文章
- 如何创建一个自定义jQuery插件
简介 jQuery 库是专为加快 JavaScript 开发速度而设计的.通过简化编写 JavaScript 的方式,减少代码量.使用 jQuery 库时,您可能会发现您经常为一些常用函数重写相同的代 ...
- JQuery插件之Jquery.datatables.js用法及api
1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ); 示例:http://www.guoxk ...
- javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)
类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. ...
- 常用Jquery插件整理
虽然自己也写过插件,但JQuery插件种类的繁多,大多时候,我还是使用别人写好的插件,这些都是我用了同类插件里较为不错的一些,今天就整理一下公开放出来. UI: jquery.HooRay(哈哈,自己 ...
- jQuery 插件编程精讲与技巧
适应的读者: 1.有一定的jquery编程基础但是想在技能上有所提升的人 2.前端开发的程序员 3.对编程感兴趣的学生 为什么要学习jquery插件的编写? 为什么要学习jquery插件的编写?相信这 ...
- 常用JQuery插件
虽然自己也写过插件,但JQuery插件种类的繁多,大多时候,我还是使用别人写好的插件,这些都是我用了同类插件里较为不错的一些,今天就整理一下公开放出来. UI: jquery.HooRay(哈哈,自己 ...
- 关于jquery插件 入门
关于 JavaScript & jQuery 的插件开发 最近在温故 JavaScript 的面向对象,于是乎再次翻开了<JavaScript高级程序设计>第3版,了解到其中常 ...
- 2013年优秀jQuery插件
今天为大家推荐的是2013年的第一期,在这期里面十个jQuery插件涵盖了响应式的网格布局插件.图片放大插件.表单元素中自定义select插件,google 地图插件.文件拖放上传插件.tooltip ...
- 转 常用JQuery插件整理
虽然自己也写过插件,但JQuery插件种类的繁多,大多时候,我还是使用别人写好的插件,这些都是我用了同类插件里较为不错的一些,今天就整理一下公开放出来. UI: jquery.HooRay(哈哈,自己 ...
随机推荐
- TFS使用小技巧
前述: TFS是微软自家的项目管理软件 link:TFS2012团队管理基本配置及基础使用方法 碰到的问题: 一.[高级—>获取特定版本] 今天做的一个项目,自己引用程序集出错,一直没找到解决方 ...
- C++学习笔记--Season 1
#include <iostream> //预处理 注意:iostream不带.h int main() { std::cout << "Aloha World&qu ...
- Installshield更新时,新加dll未拷贝至安装目录问题完美解决【原创】
最近在发现在开发过程中新增的目录或文件(特别是dll\ocx\exe等二进制文件),在升级安装时拷贝失败. 经过一周的研究,完美解决办法: 对于新增的文件或目录,放到一个新的component中,并且 ...
- Node.js stream 流学习
由于node.js 创建http 是这样的 http.createServer(function(request,response){}).listen(2000); 里面的request 就是rea ...
- 基于Karma和Jasmine的AngularJS测试
1:工程目录结构 y@y:karma-t01$ tree -L 3.├── client│ ├── app│ │ └── user│ ├── bower_components│ │ ...
- oracle insert &字符插入问题
例如执行一下语句: insert into NSRXT_SP (SP_ID, SP_TITLE, SP_DESC, SP_URL, SP_TYPE, SP_SUB_TYPE, ADD_TIME, CZ ...
- BZOJ1708: [Usaco2007 Oct]Money奶牛的硬币
1708: [Usaco2007 Oct]Money奶牛的硬币 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 513 Solved: 329[Submi ...
- javascript对象拷贝
浅拷贝 浅拷贝函数: function copy(p){ var c = {}; for (var i in p){ c[i] = p[i]; } c.uber = p; return c; } 测试 ...
- oracle触发器使用总结
1.说明 1)触发器是一种特殊的存储过程,触发器一般由事件触发并且不能接受参数,存储器由语句块去调用 2)触发器分类: 1.DML触发器: 创建在表上,由DML事件引发 2.instead of触发器 ...
- maven项目中找不到Maven Dependencies解决办法
用eclipse创建maven项目后,在Deployment Assembly中通过Add...->Java Build Path Entries导入Maven Dependencies时,发现 ...