css_消除多行文本溢出显示省略号对最后一行行高的影响

要求：标题文字最多2行，多了隐藏，高度自适应（1行显示一行高度）

问题:多行文本溢出显示省略号会不显示最后一行下部分的行高

这是标题文字的HTML

这是标题文字的css样式

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

解决办法
offsetHeight：可理解为div的可视高度，通常为样式的height+上下padding+上下border-width。
scrollHeight：内容的实际高度+上下padding（如果没有限制div的height，即height是自适应的，一般是scrollHeight==clientHeight）

根据这个条件我们可以知道当出现省略号的时候scrollHeight >offsetHeight，所以我们的解决办法就是在mounted（）钩子函数上去判断scrollHeight >offsetHeight是否成立，如果成立，设置高度为两行文本所需的高度。

注意：因为html元素只有在mounted挂载后我们才能够拿到dom节点的样式，所以我们要在mounted（）钩子函数上去判断

1.vue

 mounted() {
if (this.$refs.title.scrollHeight > this.$refs.title.offsetHeight) {
      this.$refs.title.style.height = 1.12 + "rem";
      //正好是行高的两倍,也就是两行文本所需的高度
    }
}