scrollWidth和scrollHeight详细介绍

js、css实现文本超出两行溢出，并且显示查看更多字样

诉求：想实现标题和内容在一行显示，并且内容最多显示两行，当超出两行时用省略号截取显示，并出现查看更多字样

思考：文本超出部分用省略号显示这个需求点其实比较简单，包括显示多行，简单的几句css代码就能搞定，这个问题的关键点在于当超出规定的行数时，需要显示出查看更多字样。

如果是一行的情况下其实也比较简单，用内容的长度进行判断1一下就好了，如果父元素长度为300px，那么总长度➖标题的长度就是内容加上查看更多的长度，比如标题50px，那么可以大概估计一下，当内容长度超出200px了，就可以显示查看更多字样了，具体问题具体分析，还要根据项目中实际需求来确定，但是有一点是需要注意的，这个只是大概估计出来的值，可能存在一定的误差。

可能还有人想到用字数判断，一行显示多少个字，超出了就显示查看更多，这种如果都是一种语言还好，但如果会出现英文、中文或者数字、特殊符号，这种方式也不太准确了。

下面记录一种对于我本人来说比较新的方式，那就是scrollWidth和scrollHeight

element.scrollWidth：返回元素的整体宽度，包括由于溢出而无法展示在网页的不可见部分。
element.scrollHeight ：返回元素的整体高度，包括由于溢出而无法展示在网页的不可见部分。

如果是一行就可以使用scrollWidth，如果是多行就使用scrollHeight
直接上代码（多行）

const clientHeight = document.getElementById(`div`).clientHeight
const scrollHeight = document.getElementById(`div`).scrollHeight
if(clientHeight < scrollHeight){
    console.log("有溢出，需要显示")
} else {
    console.log("没有溢出，不需要显示")
}

.text-overflow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.multi-row-ellipsis {
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

这个问题想了好久，一直的想法就是如何计算高度或者根据字数，后来经过同事指导发现原来一行代码就可以解决了，说明时刻要复习原生的一些api，真的很重要！