//多行文本溢出显示省略号,className是内容标签,dotscolor是省略号的颜色
function mapleTextareaOverFlow(className,dotscolor){
var elBoxs = document.getElementsByClassName(className);
var elBoxsLength = elBoxs.length;
for(let i = 0; i < elBoxsLength; i += 1) {
var el = elBoxs[i];
// 设置需要省略的属性及字体的两端对齐的样式
el.style.overflow = 'hidden';
el.style.wordBreak = 'break-all';
el.style.wordWrap = 'break-word';
el.style.textAlign = 'justify';
var options = {
rows: parseInt(el.getAttribute('rows')),
isSupportlineCamp: el.style.webkitLineClamp !== undefined,
};
if(dotscolor){
el.style.textOverflow = '';
options.isSupportlineCamp = false;
}else{
el.style.textOverflow = 'ellipsis';
}
var text = el.innerHTML;
if(options.isSupportlineCamp) {
el.style.webkitLineClamp = options.rows;
el.style.display = '-webkit-box';
el.style.webkitBoxOrient = 'vertical';
} else {
var heightStr = getCurrentStyle(el, 'height');
var height = getNumber(heightStr);
var maxHeight = getMaxHeight(el, options.rows, text);
if(height > maxHeight) {
subStrChar(el, maxHeight, text);
} else {
el.innerHTML = text;
}
}
};
function subStrChar(el, maxHeight, text) {
console.log(maxHeight);
var end = false;
var i = 0;
while(!end) {
i++;
el.innerHTML = text.substring(0, i) + '...';
var currentHeightStr = getCurrentStyle(el, 'height');
var currentHeight = getNumber(currentHeightStr);
if(currentHeight > maxHeight) {
el.innerHTML = text.substring(0, i - 1) + "<span style='color:"+dotscolor+"'>...</span>";
end = true;
}
if(i >= text.length) {
break;
}
}
}
function getMaxHeight(el, rows, text) {
var lineHeight = getCurrentStyle(el, 'lineHeight');
var number = 0;
if(lineHeight === 'normal') {
var index = 0;
do {
el.innerHTML = text[index++];
} while(!getNumber(getCurrentStyle(el, 'height')));
number = getNumber(getCurrentStyle(el, 'height'));
} else {
number = getNumber(lineHeight);
}
return number * rows;
}
function getCurrentStyle(el, elAttr) {
return window.getComputedStyle(el)[elAttr]
}
function getNumber(str) {
var number = parseFloat(str);
return Math.ceil(number)
}
}
