html多行文本省略,js实现多行文本省略

单行文本省略

效果图：

css单行省略.png

// css里设置

元素 {

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;

width: 400px;

}

css实现多行文本省略

效果图：

css多行省略.png

// css里设置

元素 {

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

overflow: hidden;

width: 400px;

}

因为webkitLineClamp目前只对google,firefox浏览器支持，使得其他的浏览器无法进行css多行文本样式的省略。于是想用js来实现这个效果。

js实现多行文本省略

1、给需要省略的标签添加类名:mapleTextareaOverFlow和行数:rows;

2、判断是否有webkitLineClamp属性，有的话直接添加css样式省略；没有则进行计算；

3、超过行数则省略，不超过则不管；

效果图：

html

人生不如意常十八九，要让自己快乐，就必须给自己减压，减压的好方法就是学会忘记，人生需要能拿得起，有时候放得下更重要。

人生不如意常十八九，要让自己快乐，就必须给自己减压，减压的好方法就是学会忘记，人生需要能拿得起，有时候放得下更重要。

人生不如意常十八九，要让自己快乐，就必须给自己减压，减压的好方法就是学会忘记，人生需要能拿得起，有时候放得下更重要。

js的实现

// 获取需要设置多行省略的标签

const elBoxs = document.getElementsByClassName('mapleTextareaOverFlow');

const elBoxsLength = elBoxs.length;

// 没有使用forEach(有些浏览器不兼容)和map(标签数组不能使用map的方法)

for(let i = 0; i < elBoxsLength; i += 1) {

const el = elBoxs[i];

let text = el.innerHTML;

// 需要在第几行省略，是否支持webkitLineClamp属性

let options = {

rows: parseInt(el.getAttribute('rows')),

isSupportlineCamp: `${el.style.webkitLineClamp}` !== 'undefined',

};

// 设置需要省略的属性及字体的两端对齐的样式

el.style.overflow = 'hidden';

el.style.textOverflow = 'ellipsis';

el.style.wordBreak = 'break-all';

el.style.wordWrap = 'break-word';

el.style.textAlign = 'justify';

// 支持webkitLineClamp的话直接使用浏览器css样式设置省略号(safari不是很支持，可以直接使用js计算方式)，否则通过计算方式

if(options.isSupportlineCamp) {

el.style.webkitLineClamp = options.rows;

el.style.display = '-webkit-box';

el.style.webkitBoxOrient = 'vertical';

} else {

const heightStr = getCurrentStyle(el, 'height');

const height = getNumber(heightStr);

const 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);

let end = false;

let i = 0;

while(!end) {

i++;

el.innerHTML = text.substring(0, i) + '...';

const currentHeightStr = getCurrentStyle(el, 'height');

const currentHeight = getNumber(currentHeightStr);

if(currentHeight > maxHeight) {

el.innerHTML = text.substring(0, i - 1) + '...';

end = true;

}

if(i >= text.length) {

break;

}

}

}

// 获取最大高度，当line-height为normal的时候，对标签塞入字符，获取一行的行高

function getMaxHeight(el, rows, text) {

const lineHeight = getCurrentStyle(el, 'lineHeight');

let number = 0;

if(lineHeight === 'normal') {

let 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) {

// getComputedStyle获取元素的所有CSS属性的值

return window.getComputedStyle(el)[elAttr]

}

// 将获取的字符串值变成向上取整成数字

function getNumber(str) {

let number = parseFloat(str);

return Math.ceil(number)

}