html 如何判断文本溢出,判断文本是否溢出

问题

需求：当一个div的内容过多时，显示省略号，并提供一个显示更多的按钮；如果内容较少，正常展示不提供按钮。

分析：以上问题的本质就在于，如何判断div的内容溢出了

(为了方便，方案采用vue的写法)

方案一

方案一为Determine if an HTML element's content overflows中的最高赞回答，主要思想是对比元素的el.clientWidth和el.scrollWidth，如果scrollWidth较大，说明溢出了，否则没溢出。

长长的内容长长的内容

显示

const el = this.$refs.content

this.showBtn = el.clientWidth < el.scrollWidth

window.addEventListener('resize', () => {

this.showTest = el.clientWidth < el.scrollWidth

})

.test{

width:10%;

background: #ccc;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

为了测试方便，以上demo加上了改变窗口大小的resize函数，可以发现div宽度增大时，文本不溢出不显示按钮，div宽度缩小时，文本溢出显示按钮

stackoverflow的回答下，有人反映此方案在某些浏览器会出现，文本溢出了，但clientWidth与scrollWidth相等。于是有人提到了另一个方案

方案二

方案二位 HTML text-overflow ellipsis detection的最高赞回答，主要是将div克隆一份但不显示(visibility:hidden),比较两者的宽度，如果副本的宽度大于元素本身的宽度，则表示溢出，否则未溢出

长长的内容长长的内容

长长的内容长长的内容

显示

const el = this.$refs.content

const elCopy = this.$refs.contentCopy

this.showBtn = el.clientWidth < elCopy.clientWidth

console.log(el.clientWidth, elCopy.clientWidth)

window.addEventListener('resize', () => {

this.showBtn = el.clientWidth < elCopy.clientWidth

})

.content{

display: inline-block;

width:10%;

background: #ccc;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

.content-copy{

display: inline-block;

visibility: hidden;

}

这里要注意一点，此方案中元素不能为block，因为这样eleCopy的宽度会为父元素的100%，而不是由内容撑开的宽度；也不能为inline，因为这样没有width，无法比较；因此将元素设为inline-block

小结

以上2种方案都可以实现判断文本是否溢出，虽然思想有所不同，但其实本质是一样的：都是通过对比文本实际的宽度和显示省略号时的宽度，所以可以从这一点出发，再多多思考有没有其他解决方案。