問題

需求：當一個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種方案都可以實現判斷文本是否溢出，雖然思想有所不同，但其實本質是一樣的：都是通過對比文本實際的寬度和顯示省略號時的寬度，所以可以從這一點出發，再多多思考有沒有其他解決方案。

總結

以上是生活随笔為你收集整理的html 如何判断文本溢出,判断文本是否溢出的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。