SOURCE

console 命令行工具 X clear

                    
>
console
let pDom = document.getElementById('duohangp')
// let pDom2 = document.getElementById('danhangp')

/**
 * dom: 溢出隐藏的dom元素
 * overflowClassName: 设置溢出隐藏的classname
 * isOneLine: 是否是单行溢出隐藏
 */
function isTextOverflow(dom, overflowClassName, isOneLine) {
    let compareKey = ""
    if (isOneLine) {
        // 是单行就比较宽度
        compareKey = 'clientWidth'
    } else {
        // 多行比较高度
        compareKey = 'clientHeight'
    }
    let oldValue = dom[compareKey]
    let noOverflowDom = dom.cloneNode(true)
    noOverflowDom.classList.remove(overflowClassName)
    // 如果是单行需要把元素设为行内块,否则会占一行,肯定比设置了宽度的元素要长
    isOneLine && (noOverflowDom.style.display = 'inline-block')
    // 如果是多行,需要把元素的宽度设为和溢出隐藏的宽度一致(如果元素的宽度样式没有写在overflowClassName中的话)
    !isOneLine && (noOverflowDom.style.width = dom.clientWidth + 'px')
    document.body.appendChild(noOverflowDom)
    let newValue = noOverflowDom[compareKey]
    let state = newValue > oldValue
    document.body.removeChild(noOverflowDom)
    return state
}

function init(){
    console.log(pDom.clientHeight)
    let dom = document.querySelector('.duohangP')
    console.log(dom)
}
init()

console.log(isTextOverflow(pDom, 'duohangP', false))


<div id="duohangp" class="duohangP text">
    <p class="open">更多</p>
    速度速度速度速度速度速度速度速度速度速度速度速度速度速度速度速度速度速度速度
</div>

<!-- <p id="danhangp" class="danhangP">度度速度速azxczdq度速度速度</p> -->
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.danhangP{
    width: 200px;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.duohangP{
    width: 200px;
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    position: relative;
}

.duohangP::before{
    content: '';
    float: right;
    width: 0; /*设置为0,或者不设置宽度*/
    height: calc(63px - 21px);/*先随便设置一个高度*/
}

.open{
    float: right;
    clear: both;
    cursor: pointer;
    color: skyblue;
}