判斷文本是否溢出

問題

需求：當一個div的內容過多時，顯示省略號，並提供一個顯示更多的按鈕；如果內容較少，正常展示不提供按鈕。
分析：以上問題的本質就在於，如何判斷div的內容溢出了
（為了方便，方案采用vue的寫法）

方案一

方案一為Determine if an HTML element's content overflows中的最高贊回答，主要思想是對比元素的el.clientWidth和el.scrollWidth，如果scrollWidth較大，說明溢出了，否則沒溢出。

 <div class='content' ref="content">長長的內容長長的內容</div>
    <button v-if="showBtn">顯示</button>

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）,比較兩者的寬度，如果副本的寬度大於元素本身的寬度，則表示溢出，否則未溢出

<div class='content' ref="content">長長的內容長長的內容</div>
    <div class='content-copy' ref="contentCopy">長長的內容長長的內容</div>
    <button v-if="showBtn">顯示</button>

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