前一陣做需求時，有個小功能實現(xiàn)起來廢了點腦細(xì)胞，覺得可以記錄一下。
產(chǎn)品的具體訴求是：用戶點擊按鈕進(jìn)入詳情頁面，詳情頁內(nèi)的卡片標(biāo)題內(nèi)容過長時，標(biāo)題的前后兩端正常展示，中間用省略號...表示，并且鼠標(biāo)懸浮后，展示全部內(nèi)容。
關(guān)于鼠標(biāo)懸浮展示全部內(nèi)容的代碼就不放在這里了，本文主要寫關(guān)于實現(xiàn)中間省略號...的代碼。
實現(xiàn)思路
- 獲取標(biāo)題盒子的真實寬度, 我這里用的是clientWidth；
- 判斷文本內(nèi)容的實際寬度是否超出了標(biāo)題盒子的寬度；
- 通過文字所占的寬度累加之和與標(biāo)題盒子的寬度做對比，計算出要截取位置的索引；
- 同理，文本尾部的內(nèi)容需要翻轉(zhuǎn)一下，然后計算索引，截取完之后再翻轉(zhuǎn)回來；
代碼
html代碼
<div class="title" id="test">近日，銀行紛紛下調(diào)大額存單利率，但銀行定期存款仍被瘋搶。銀行理財經(jīng)理表示：有意向購買定期存款要盡快，不確定利率是否會再降。</div>
css代碼: 設(shè)置文本不換行，同時設(shè)置overflow:hidden讓文本溢出盒子隱藏
.title { width: 640px; height: 40px; line-height: 40px; color: #00b388; border: 1px solid #ddd; overflow: hidden; /* text-overflow: ellipsis; */ white-space: nowrap; /* box-sizing: border-box; */ padding: 0 10px;}
javascript代碼：
獲取標(biāo)題盒子的寬度時要注意,如果在css樣式代碼中設(shè)置了padding, 就需要獲取標(biāo)題盒子的左右padding值。通過getComputedStyle屬性獲取到所有的css樣式屬性對應(yīng)的值, 由于獲取的padding值都是帶具體像素單位的，比如: px，可以用parseInt特殊處理一下。
獲取盒子的寬度的代碼，我當(dāng)時開發(fā)時是用canvas計算的，但計算的效果不太理想，后來逛社區(qū)，發(fā)現(xiàn)了嘉琪coder大佬分享的文章，我這里就直接把代碼搬過來用吧, 想了解的掘友可以直接滑到文章末尾查看。
判斷文本內(nèi)容是否超出標(biāo)題盒子
// 標(biāo)題盒子domconst dom = document.getElementById('test');
// 獲取dom元素的padding值function getPadding(el) { const domCss = window.getComputedStyle(el, null); const pl = Number.parseInt(domCss.paddingLeft, 10) || 0; const pr = Number.parseInt(domCss.paddingRight, 10) || 0; console.log('padding-left:', pl, 'padding-right:', pr); return { left: pl, right: pr }}// 檢測dom元素的寬度，function checkLength(dom) { // 創(chuàng)建一個 Range 對象 const range = document.createRange(); // 設(shè)置選中文本的起始和結(jié)束位置 range.setStart(dom, 0), range.setEnd(dom, dom.childNodes.length); // 獲取元素在文檔中的位置和大小信息,這里直接獲取的元素的寬度 let rangeWidth = range.getBoundingClientRect().width; // 獲取的寬度一般都會有多位小數(shù)點，判斷如果小于0.001的就直接舍掉 const offsetWidth = rangeWidth - Math.floor(rangeWidth); if (offsetWidth < 0.001) { rangeWidth = Math.floor(rangeWidth); } // 獲取元素padding值 const { left, right } = getPadding(dom); const paddingWidth = left + right; // status：文本內(nèi)容是否超出標(biāo)題盒子； // width: 標(biāo)題盒子真實能夠容納文本內(nèi)容的寬度 return { status: paddingWidth + rangeWidth > dom.clientWidth, width: dom.clientWidth - paddingWidth };}
通過charCodeAt返回指定位置的字符的Unicode編碼, 返回的值對應(yīng)ASCII碼表對應(yīng)的值，0-127包含了常用的英文、數(shù)字、符號等，這些都是占一個字節(jié)長度的字符，而大于127的為占兩個字節(jié)長度的字符。
截取和計算文本長度
// 計算文本長度，當(dāng)長度之和大于等于dom元素的寬度后，返回當(dāng)前文字所在的索引，截取時會用到。function calcTextLength(text, width) { let realLength = 0; let index = 0; for (let i = 0; i < text.length; i++) { charCode = text.charCodeAt(i); if (charCode >= 0 && charCode <= 128) { realLength += 1; } else { realLength += 2 * 14; // 14是字體大小 } // 判斷長度，為true時終止循環(huán)，記錄索引并返回 if (realLength >= width) { index = i; break; } } return index;}
// 設(shè)置文本內(nèi)容function setTextContent(text) { const { status, width } = checkLength(dom); let str = ''; if (status) { // 翻轉(zhuǎn)文本 let reverseStr = text.split('').reverse().join(''); // 計算左右兩邊文本要截取的字符索引 const leftTextIndex = calcTextLength(text, width); const rightTextIndex = calcTextLength(reverseStr, width); // 將右側(cè)字符先截取，后翻轉(zhuǎn) reverseStr = reverseStr.substring(0, rightTextIndex); reverseStr = reverseStr.split('').reverse().join(''); // 字符拼接 str = `${text.substring(0, leftTextIndex)}...${reverseStr}`; } else { str = text; } dom.innerHTML = str;}
最終實現(xiàn)的效果如下：
image.png
上面就是此功能的所有代碼了，如果想要在本地試驗的話，可以在本地新建一個html文件，復(fù)制上面代碼就可以了。
下面記錄下從社區(qū)內(nèi)學(xué)到的相關(guān)知識：
- JS獲取字符串長度的幾種常用方法，漢字算兩個字節(jié);
1、 js判斷文字被溢出隱藏的幾種方法
1. Element-plus這個UI框架中的表格組件實現(xiàn)的方案。
通過document.createRange和document.getBoundingClientRect()這兩個方法實現(xiàn)的。也就是我上面代碼中實現(xiàn)的checkLength方法。
2. 創(chuàng)建一個隱藏的div模擬實際寬度
通過創(chuàng)建一個不會在頁面顯示出來的dom元素，然后把文本內(nèi)容設(shè)置進(jìn)去，真實的文本長度與標(biāo)題盒子比較寬度，判斷是否被溢出隱藏了。
function getDomDivWidth(dom) { const elementWidth = dom.clientWidth; const tempElement = document.createElement('div'); const style = window.getComputedStyle(dom, null) const { left, right } = getPadding(dom); // 這里我寫的有點重復(fù)了，可以優(yōu)化 tempElement.style.cssText = ` position: absolute; top: -9999px; left: -9999px; white-space: nowrap; padding-left:${style.paddingLeft}; padding-right:${style.paddingRight}; font-size: ${style.fontSize}; font-family: ${style.fontFamily}; font-weight: ${style.fontWeight}; letter-spacing: ${style.letterSpacing}; `; tempElement.textContent = dom.textContent; document.body.appendChild(tempElement); const obj = { status: tempElement.clientWidth + right + left > elementWidth, width: elementWidth - left - right } document.body.removeChild(tempElement); return obj;}
3. 創(chuàng)建一個block元素來包裹inline元素
這種方法是在UI框架acro design vue中實現(xiàn)的。外層套一個塊級(block)元素，內(nèi)部是一個行內(nèi)(inline)元素。給外層元素設(shè)置溢出隱藏的樣式屬性，不對內(nèi)層元素做處理，這樣內(nèi)層元素的寬度是不變的。因此，通過獲取內(nèi)層元素的寬度和外層元素的寬度作比較，就可以判斷出文本是否被溢出隱藏了。
// html代碼<div class="title" id="test"> <span class="content">近日，銀行紛紛下調(diào)大額存單利率，但銀行定期存款仍被瘋搶。銀行理財經(jīng)理表示：有意向購買定期存款要盡快，不確定利率是否會再降。</span></div>
// 創(chuàng)建一個block元素來包裹inline元素const content = document.querySelector('.content');function getBlockDomWidth(dom) { const { left, right } = getPadding(dom); console.log(dom.clientWidth, content.clientWidth) const obj = { status: dom.clientWidth < content.clientWidth + left + right, width: dom.clientWidth - left - right } return obj;}
4. 使用canvas中的measureText方法和TextMetrics對象來獲取元素的寬度
通過Canvas 2D渲染上下文(context)可以調(diào)用measureText方法，此方法會返回TextMetrics對象，該對象的width屬性值就是字符占據(jù)的寬度，由此也能獲取到文本的真實寬度，此方法有弊端，比如說兼容性，精確度等等。
// 獲取文本長度function getTextWidth(text, font = 14) { const canvas = document.createElement("canvas"); const context = canvas.getContext("2d") context.font = font const metrics = context.measureText(text); return metrics.width}
5. 使用css實現(xiàn)
這種方式來自評論區(qū)的掘友@S_mosar提供的思路。先來看下效果：
代碼如下：css部分
.con { color: #666; width: 600px; margin: 50px auto; border-radius: 8px; padding: 15px; overflow: hidden; resize: horizontal; box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;}
.wrap { position: relative; line-height: 2; height: 2em; padding: 0 10px; overflow: hidden; background: #fff; margin: 5px 0;}
.wrap:nth-child(odd) { background: #f5f5f5;}
.title { display: block; position: relative; background: inherit; text-align: justify; height: 2em; overflow: hidden; top: -4em;}
.txt { display: block; max-height: 4em;}.title::before{ content: attr(title); width: 50%; float: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl;}
html部分
<ul class="con"> <li class="wrap"> <span class="txt">CSS 實現(xiàn)優(yōu)惠券的技巧 - 2021-03-26</span> <span class="title" title="CSS 實現(xiàn)優(yōu)惠券的技巧 - 2021-03-26">CSS 實現(xiàn)優(yōu)惠券的技巧 - 2021-03-26</span> </li> <li class="wrap"> <span class="txt">CSS 測試標(biāo)題，這是一個稍微有點長的標(biāo)題，超出一行以后才會有title提示，標(biāo)題是 實現(xiàn)優(yōu)惠券的技巧 - 2021-03-26</span> <span class="title" title="CSS 測試標(biāo)題，這是一個稍微有點長的標(biāo)題，超出一行以后才會有title提示，標(biāo)題是 實現(xiàn)優(yōu)惠券的技巧 - 2021-03-26">CSS 測試標(biāo)題，這是一個稍微有點長的標(biāo)題，超出一行以后才會有title提示，標(biāo)題是 實現(xiàn)優(yōu)惠券的技巧 - 2021-03-26</span> </li> <li class="wrap"> <span class="txt">CSS 拖拽?</span> <span class="title" title="CSS 拖拽?">CSS 拖拽?</span> </li> <li class="wrap"> <span class="txt">CSS 文本超出自動顯示title</span> <span class="title" title="CSS 文本超出自動顯示title">CSS 文本超出自動顯示title</span> </li></ul>
思路解析：
文字內(nèi)容的父級標(biāo)簽li設(shè)置line-height: 2;、overflow: hidden;、height: 2em;，因此 li 標(biāo)簽的高度是當(dāng)前元素字體大小的2倍，行高也是當(dāng)前字體大小的2倍，同時內(nèi)容若溢出則隱藏。
li 標(biāo)簽內(nèi)部有兩個 span 標(biāo)簽，二者的作用分別是：類名為.txt的標(biāo)簽用來展示不需要省略號時的文本，類名為.title用來展示需要省略號時的文本，具體是如何實現(xiàn)的請看第五步。
給.title設(shè)置偽類before，將偽類寬度設(shè)置為50%，搭配浮動float: right;，使得偽類文本內(nèi)容靠右，這樣設(shè)置后，.title和偽類就會各占父級寬度的一半了。
.title標(biāo)簽設(shè)置text-align: justify;，用來將文本內(nèi)容和偽類的內(nèi)容兩端對齊。
給偽類before設(shè)置文字對齊方式direction: rtl;，將偽類內(nèi)的文本從右向左流動，即right to left，再設(shè)置溢出省略的css樣式就可以了。
.title標(biāo)簽設(shè)置了top: -4em,.txt標(biāo)簽設(shè)置max-height: 4em;這樣保證.title永遠(yuǎn)都在.txt上面，當(dāng)內(nèi)容足夠長，.txt文本內(nèi)容會換行，導(dǎo)致高度從默認(rèn)2em變?yōu)?em，而.title位置是-4em，此時正好將.txt覆蓋掉，此時顯示的就是.title標(biāo)簽的內(nèi)容了。
知識點：text-align: justify;
- 為了實現(xiàn)這種對齊，瀏覽器會在單詞之間添加額外的空間。這通常意味著某些單詞之間的間距會比其他單詞之間的間距稍大一些。
- 如果最后一行只有一個單詞或少數(shù)幾個單詞，那么這些單詞通常不會展開以填充整行，而是保持左對齊。
★需要注意的是，text-align: justify; 主要用于多行文本。對于單行文本，這個值的效果與 text-align: left; 相同，因為單行文本無法兩端對齊。
”
2、JS獲取字符串長度的幾種常用方法
1. 通過charCodeAt判斷字符編碼
通過charCodeAt獲取指定位置字符的Unicode編碼，返回的值對應(yīng)ASCII碼表對應(yīng)的值，0-127包含了常用的英文、數(shù)字、符號等，這些都是占一個字節(jié)長度的字符，而大于127的為占兩個字節(jié)長度的字符。
function calcTextLength(text) { let realLength = 0; for (let i = 0; i < text.length; i++) { charCode = text.charCodeAt(i); if (charCode >= 0 && charCode <= 128) { realLength += 1; } else { realLength += 2; } } return realLength;}
2. 采取將雙字節(jié)字符替換成"aa"的做法，取長度
function getTextWidth(text) { return text.replace(/[^\x00-\xff]/g,"aa").length;};
參考文章
1. JS如何判斷文字被ellipsis了？
2. Canvas API 中文網(wǎng)
3. JS獲取字符串長度的常用方法，漢字算兩個字節(jié)
4. canvas繪制字體偏上不居中問題、文字垂直居中后偏上問題、measureText方法和TextMetrics對象
閱讀原文：原文鏈接
該文章在 2024/12/30 15:55:37 編輯過
400 186 1886
