判斷文字是否溢位

2022-03-07 14:13:57 字數 1393 閱讀 1312

需求：當乙個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', () => )
.test
為了測試方便，以上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', () => )
.content


.content-copy
這裡要注意一點，此方案中元素不能為block，因為這樣elecopy的寬度會為父元素的100%，而不是由內容撐開的寬度；也不能為inline，因為這樣沒有width，無法比較；因此將元素設為inline-block

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

c 判斷輸入文字是否是數字

c 判斷輸入文字是否是數字 方案一 名稱 isnumberic 功能 判斷輸入的是否是數字 引數 string otext 源文字 返回值 bool true 是 false 否 public bool isnumberic string otext catch try catch方法 例 try ...

c 判斷輸入文字是否是數字

c 判斷輸入文字是否是數字 方案一 名稱 isnumberic 功能 判斷輸入的是否是數字 引數 string otext 源文字 返回值 bool true 是 false 否 public bool isnumberic string otext catch try catch方法 例 try ...

c 判斷輸入文字是否是數字

c 判斷輸入文字是否是數字 方案一 名稱 isnumberic 功能 判斷輸入的是否是數字 引數 string otext 源文字 返回值 bool true 是 false 否 public bool isnumberic string otext catch try catch方法 例 try ...