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

发布时间 2023-06-02 14:11:12作者: 郭大蛋子
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 + "..."
        }
})