vue多行文本显示省略号加展开收起按钮

getClientRects()获取文本的行数和宽高等信息，只能获取行内元素的

 

nextTick(() => {

        const lineRows = document.querySelector('.abc').getClientRects();

        // 如果行数超出2||行数是2&&最后一行宽度超过dom宽度-展开收起按钮的width就是多了，要显示展开收起的按钮

        if(lineRows.length > 2 || (lineRows.length == 2 && lineRows[1].width > document.querySelector('.abc').offsetWidth - 66)) {

　　　  // 挨个减少文本字数 然后检测是否超出

            showContent.value = showContent.value.substr(0, showContent.value.length - 1)

            getText()

        }else{

            showContent.value = showContent.value + "..."

        }

})