JSFiddle - React, Tailwind, and code Playground
by tu genhua
HTML
<h2 style="color:red;">通过行数来截取字符串</h2>
<hr/>
<h3 style="margin-top:12px;">未截取之前的demo</h3>
<div style="width:200px;border:1px solid red;">
呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我哇
</div>
<h3 style="color:red;margin-top:20px;line-height:18px;">截取之后的demo,定宽度200px，显示一行</h3>
<div class="text" style="width:200px;">
呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我哇
</div>
<div style="margin-top:10px;">
代码初始化如下：
new MultiEllipsis({
"targetCls" : '.text',
"limitLineNumber":1,
"isCharLimit": false
});
</div>
<h3 style="color:red;margin-top:20px;">截取之后的demo,定宽度200px，显示2行</h3>
<div class="text2" style="width:200px;border:1px solid red;line-height:18px;">
呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我哇
</div>
<div style="margin-top:10px;">
代码初始化如下：
new MultiEllipsis({
"targetCls" : '.text2',
"limitLineNumber":2,
"isCharLimit": false
});
</div>
<h3 style="color:red;margin-top:20px;">截取之后的demo,定宽度200px，显示3行</h3>
<div class="text3" style="width:200px;border:1px solid red;line-height:18px;">
呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我哇
</div>
<div style="margin-top:10px;">
代码初始化如下：
new MultiEllipsis({
"targetCls" : '.text3',
"limitLineNumber":3,
"isCharLimit": false
});
</div>
<h3 style="color:red;margin-top:20px;">截取之后的demo,定宽度200px，显示4行</h3>
<div class="text4" style="width:200px;border:1px solid red;line-height:18px;">
呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我哇
</div>
<div style="margin-top:10px;">
代码初始化如下：
new MultiEllipsis({
"targetCls" : '.text4',
"limitLineNumber":4,
"isCharLimit": false
});
</div>
<h3 style="color:red;margin-top:20px;">截取之后的demo,定宽度200px，显示5行,因为最大长度才5行，所以不显示省略号提示</h3>
<div class="text5" style="width:200px;border:1px solid red;line-height:18px;">
呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我哇
</div>
<div style="margin-top:10px;">
代码初始化如下：
new MultiEllipsis({
"targetCls"...CSS
*{margin:0;padding:0}
.checkModular{font-size:15px;border:1px solid #f00;position:absolute;top:-9999em;left:-9999em;}
.text{font-size:12px;border:1px solid #f00;}JavaScript
/*
* 基于JS的MultiEllipsis
*/
function MultiEllipsis(options) {
var self = this;
self.options = $.extend({},defaults,options || {});
self._init();
}
$.extend(MultiEllipsis.prototype,{
// 页面初始化
_init: function(){
var self = this,
cfg = self.options;
if(cfg.targetCls == null || $(cfg.targetCls + "")[0] === undefined) {
if(window.console) {
console.log("targetCls不为空!");
}
return;
}
if(cfg.isShowTitle) {
// 获取元素的文本 添加title属性
var title = self.getText();
$(cfg.targetCls ).attr({"title":title});
}
// 如果是按照字符来限制的话 那么就不按照高度来比较 直接返回
if(cfg.isCharLimit) {
self._charCompare();
return;
}
self._compareHeight(cfg.lineHeight * cfg.limitLineNumber);
},
/*
* 按照字符的长度来比较 来显示文本
* @method _charCompare {private}
* @return 返回新的字符串到容器里面
*/
_charCompare: function(){
var self = this,
cfg = self.options;
var text = self.getText();
if(text.length > cfg.maxLength) {
var curText = text.substring(0,cfg.maxLength);
$($(cfg.targetCls + "")[0]).html(curText + cfg.type);
}
},
/*
* 获取目标元素的text
* 如果有属性 data-text 有值的话 那么先获取这个值 否则的话 直接去html内容
* @method getText {public}
*/
getText: function(){
var self = this,
cfg = self.options;
return $.trim($($(cfg.targetCls + "")[0]).html());
},
/*
* 设置dom元素文本
* @method setText {public}
*/
setText: function(text){
var self = this,
cfg = self.options;
$($(cfg.targetCls + "")[0]).html(text);
},
/*
* 通过配置项的 行数 * 一行的行高 是否大于或者等于当前的高度
* @method _compareHeight {private}
*/
_compareHeight: function(maxLineHeight) {
var self = this;
var curHeight = self._getTargetHeight();
if(curHeight > maxLineHeight) {
self._deleteText(self.getText());
}
},
/*
* 截取文本
* @method _deleteText {private}
* @return 返回被截取的文本
*/
_deleteText: function(text){
var self = this,
cfg = self.options,
typeLen = cfg.type.length;
var curText = text.substring(0,text.length - typeLen - 1);
curText += cfg.type;
//...