JS如何判斷文字是否溢出（被ellipsis）？

2024-01-16 14:16| 來源: 網(wǎng)絡(luò)整理| 查看: 265

如果想要文本超出寬度后用省略號(hào)省略，只需要加上以下的css就行了。

.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

3行css搞定，但是問題來了：如果我們想要當(dāng)文本被省略的時(shí)候，也就是當(dāng)文本超出指定的寬度后，鼠標(biāo)懸浮在文本上面才展示popper，應(yīng)該怎么實(shí)現(xiàn)呢？

CSS幫我們搞定了省略，但是JS并不知道文本什么時(shí)候被省略了，所以我們得通過JS來計(jì)算。接下來，我將介紹幾種方法來實(shí)現(xiàn)JS計(jì)算省略。

createRange

我發(fā)現(xiàn)Element-plus表格組件已經(jīng)實(shí)現(xiàn)了這個(gè)功能，所以就先來學(xué)習(xí)一下它的源碼。

源碼地址：https://github.com/element-plus/element-plus/blob/dev/packages/components/table/src/table-body/events-helper.ts

// 僅僅粘貼相關(guān)的 const cellChild = (event.target as HTMLElement).querySelector('.cell') const range = document.createRange() range.setStart(cellChild, 0) range.setEnd(cellChild, cellChild.childNodes.length) let rangeWidth = range.getBoundingClientRect().width let rangeHeight = range.getBoundingClientRect().height /** detail: https://github.com/element-plus/element-plus/issues/10790 * What went wrong? * UI > Browser > Zoom, In Blink/WebKit, getBoundingClientRect() sometimes returns inexact values, probably due to lost precision during internal calculations. In the example above: * - Expected: 188 * - Actual: 188.00000762939453 */ const offsetWidth = rangeWidth - Math.floor(rangeWidth) if (offsetWidth < 0.001) { rangeWidth = Math.floor(rangeWidth) } const offsetHeight = rangeHeight - Math.floor(rangeHeight) if (offsetHeight < 0.001) { rangeHeight = Math.floor(rangeHeight) } const { top, left, right, bottom } = getPadding(cellChild) // 見下方 const horizontalPadding = left + right const verticalPadding = top + bottom if ( rangeWidth + horizontalPadding > cellChild.offsetWidth || rangeHeight + verticalPadding > cellChild.offsetHeight || cellChild.scrollWidth > cellChild.offsetWidth ) { createTablePopper( parent?.refs.tableWrapper, cell, cell.innerText || cell.textContent, nextZIndex, tooltipOptions ) }

// 上面代碼17行中的getPadding函數(shù) const getPadding = (el: HTMLElement) => { const style = window.getComputedStyle(el, null) const paddingLeft = Number.parseInt(style.paddingLeft, 10) || 0 const paddingRight = Number.parseInt(style.paddingRight, 10) || 0 const paddingTop = Number.parseInt(style.paddingTop, 10) || 0 const paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0 return { left: paddingLeft, right: paddingRight, top: paddingTop, bottom: paddingBottom, } }

document.createRange()?是 JavaScript 中的一個(gè)方法，用于創(chuàng)建一個(gè) Range 對(duì)象，表示文檔中的一個(gè)范圍。Range 對(duì)象通常用于選擇文檔中的一部分內(nèi)容，然后對(duì)其進(jìn)行作。

它可以：

設(shè)置選中文本范圍：可以使用?document.createRange()?方法創(chuàng)建一個(gè) Range 對(duì)象，并使用?setStart()?和?setEnd()?方法設(shè)置選中文本的起始和結(jié)束位置。插入新元素：可以使用?document.createRange()?方法創(chuàng)建一個(gè) Range 對(duì)象，并使用?insertNode()?方法將新元素插入到文檔中的指定位置。獲取特定元素的位置：可以使用?document.createRange()?方法創(chuàng)建一個(gè) Range 對(duì)象，并使用?getBoundingClientRect()?方法獲取元素在文檔中的位置和大小信息。

這邊element就是使用range對(duì)象的getBoundingClientRect獲取到元素的寬高，同時(shí)因?yàn)榈玫降膶捀咧涤泻芏辔坏男?shù)，所以element-plus做了一個(gè)判斷，如果小數(shù)值小于0.001就舍棄小數(shù)部分。

接下來，就讓我們進(jìn)行一下復(fù)刻吧。

文字的寬度 + 盒子的左右padding? > 盒子的offsetWidth 則存在省略號(hào)

Lorem ipsum dolor sit amet consectetur adipisicing elit const box = document.querySelector(".box"); const getPadding = (el) => { const style = window.getComputedStyle(el, null); const paddingLeft = Number.parseInt(style.paddingLeft, 10) || 0; const paddingRight = Number.parseInt(style.paddingRight, 10) || 0; const paddingTop = Number.parseInt(style.paddingTop, 10) || 0; const paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0; return { pLeft: paddingLeft, pRight: paddingRight, pTop: paddingTop, pBottom: paddingBottom, }; }; box.addEventListener("animationiteration", function () { const event = new CustomEvent("resize"); box.dispatchEvent(event); }); const checkEllipsis = () => { const range = document.createRange(); range.setStart(box, 0); range.setEnd(box, box.childNodes.length); window.getSelection().addRange(range); const rangeWidth = range.getBoundingClientRect().width; // 所有文字的寬度 const rangeHeight = range.getBoundingClientRect().height; // 所有文字的高度 console.log(rangeWidth, rangeHeight); const { pLeft, pRight, pTop, pBottom } = getPadding(box); console.log(pLeft, pRight, pTop, pBottom, "--"); const horizontalPadding = pLeft + pRight; const verticalPadding = pTop + pBottom; if ( rangeWidth + horizontalPadding > box.offsetWidth || rangeHeight + verticalPadding > box.offsetHeight || range.scrollWidth > box.offsetWidth ) { result.textContent = "計(jì)算結(jié)果：存在省略號(hào)"; } else { result.textContent = "計(jì)算結(jié)果：容器寬度足夠，沒有省略號(hào)了"; } }; checkEllipsis(); box.addEventListener("resize", checkEllipsis); .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .box { border: 1px solid gray; padding: 10px; width: 300px; resize: both; /**觸發(fā)頻率**/ animation: resize 0.1s infinite paused forwards; } .box:active { animation-play-state: running; } @keyframes resize { to { opacity: 1; } }

【本文地址】

公司簡(jiǎn)介

聯(lián)系我們

今日新聞

推薦新聞

專題文章