vue多行文本溢出处理
在vue多行文本溢出的问题,工作中需要兼容火狐,ie,和谷歌,添加文本kit前缀的那种方式火狐和ie不兼容,找到一种万能的方法,如下:
mounted:{
(function($) {
$.fn.xdlines = function(options) {
var opts = $.extend({}, $.fn.xdlines.defaults, options);
var $this = $(this);
for(var k = 0; k < $this.length; k++) {
var $obj = $this.eq(k);
$obj.css({ wordWrap: 'break-word' })
var str = $obj.text();
str = str.replace(/(^\s*)|(\s*$)/g, "");
var l = str.length;
var txt = '';
var lineHeight; //当前高度
var linesNum = opts.max; //需要的行数
for(var i in str) {
txt += str[i];
$obj.text(txt);
var nowh = parseInt($obj.css('height')); //当前高度
if(i == 0) {
lineHeight = nowh * linesNum;
}
if(nowh > lineHeight) {
var txt = txt.substring(0, txt.length - 3) + "...";
$obj.text(txt);
break;
}
}
}
};
$.fn.xdlines.defaults = { max: 1 }
})(jQuery)
}
updated:{
$('.el').xdlines({max:2});
}
注意在 $('.el').xdlines({max:2});必须写在updated函数中,否则不生效
$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效。
$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效。
如扩展$.fn.abc()
那么你可以这样子:$("#div").abc();
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {//....
};
jQuery.fn = jQuery.prototype所以就是把方法加载jq对象上了,所以对每一个jq实例有效。
$.fn.xdlines =function(){//函数体}这个是给jquery对象添加一个方法,那么就可以这样使用$('.el').xdlines(参数)上述例子需要传入一个对象
$.extend()个人理解是jquery混淆对象的方法。例如:
var object1 = {
apple: 0,
banana: {weight: 52, price: 100},
cherry: 97
};
var object2 = {
banana: {price: 200},
durian: 100
};
/* object2 合并到 object1 中 */
$.extend(object1, object2);
结果{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}
阅读更多- 如何处理单行文本和多行文本溢出
- Css - 文本溢出处理
- css溢出文本处理的几种方法
- 新时尚Windows8开发(16):如何处理溢出文本
- 文本单行溢出,多行溢出处理方案【...】
- jquery加密和文本溢出处理插件
- 多行文本处理溢出省略的方法
- CSS小结:一行内文本超出指定宽度溢出的处理
- 【WP开发】如何处理溢出的文本
- 一行内文本超出指定宽度溢出的处理
- 一行内文本超出指定宽度溢出的处理
- HTML-CSS常用样式文本溢出处理效果
- win8开发(16)——如何处理溢出文本
- css知识点——文本溢出的处理方法
- 纯css处理文本的溢出
- Vue 中文本内容超出规定行数后展开收起的处理
- 12.css单行和多行文本的溢出处理
- CSS小结:一行内文本超出指定宽度溢出的处理-DivCSS教程
- CSS强制文本不换行、溢出处理