console
let pDom = document.getElementById('duohangp')
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')
!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>
*{
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;
height: calc(63px - 21px);
}
.open{
float: right;
clear: both;
cursor: pointer;
color: skyblue;
}