如何让文本超出1行、两行、甚至1.5行用...省略号显示（优化）

在开发过程中，实现文本超出一行或者两行，其余部分显示省略号，这个业务需求比较尝见，那么如何实现呢

1、用css来实现

 //一行
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
//两行
 text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

当然！用css的话，只能控制整行，如果想设置1.5行呢！css就满足不了我们的这个功能了

<script type="text/javascript">
			var dom = document.getElementsByClassName("love");
			jsLine(1.5,dom);
			function jsLine(line,className){
				var textLength=className[0]['childNodes'][0].length;//文本长度
				var fontSize=getComputedStyle(className[0],undefined).getPropertyValue("font-size").substr(0,2);//获取字体大小
				var lineNum=Math.round(className[0].clientWidth/fontSize);//四舍五入,一行有多少字
				if(textLength>(lineNum*line)){
					var newText=className[0].innerText.substr(0,(Math.round(lineNum*line)))+'...';
					className[0].innerText=newText;
				}
			}
</script>

这里已经封装好了方法jsLine(line,className)，可以直接拿去用的，其中line参数是控制文本显示的行数，一行半就是1.5，两行半2.5，className是要控制的文本类名，记住要使用类选择器哦。

实现原理：
利用文本宽度/文本大小= 一行有多少字符，然后一行有多少字符*需要控制的行数=需要显示的字符数，需要显示的字符数有了，后面的就简单了，用substr()截取就行了。

这里面会遇到一个问题，如果没有对当前的文本font-size属性做设置的话，dom[0].style.fontSize会获取不到文本大小，有的朋友可能会说不设置那就是浏览器默认字体大小了，但是当前文本可能会继承其父类的font-size属性，也就是说并不是浏览器默认字体大小。那应该怎么解决呢？

var fontSize=getComputedStyle(className[0],undefined).getPropertyValue("font-size")

优化

function jsLine(line, $text) {
    //console.log('++', $text,$text.css('font-size'))
    let fontSize = Number($text.css('font-size').split('px')[0]) //获取字体大小
    let textLen = $text.text().length //文本长度
    let lineNum = $text.width() / fontSize //四舍五入,一行有多少字
    //console.log('>>', fontSize, textLen)
    let showTextLen = 0 //可展示的文字个数，中文算一个，英文两个算一个
    let newText = ''
    for (let t of $text.text()) {
        newText += t;
        //console.log(t)
        showTextLen += isChinese(t) ? 1 : 0.5
        if (showTextLen + 3.5 > line * lineNum) { //3.5 是 ...全文占的字符个数
            break;
        }
    }

    let newTextDiv = `<div>${newText}... <span>全文</span></div>`
    $text.empty()
    $text.append($(newTextDiv))
}