在前端開發(fā)中，如何使用純CSS實(shí)現(xiàn)元素懸停時內(nèi)容內(nèi)縮并顯示圖標(biāo)的效果？

在前端開發(fā)中，如何在不改變元素寬度的情況下，使其內(nèi)容在鼠標(biāo)懸停時內(nèi)縮并顯示圖標(biāo)，是一個常見的需求。這種效果需要在用戶體驗(yàn)和頁面布局之間找到平衡。下面我們將探討如何通過css實(shí)現(xiàn)這種效果。

問題描述

假設(shè)我們有一個span元素，其內(nèi)容由變量data動態(tài)填充。由于data的長度不定，span的寬度也會隨之變化。我們希望在鼠標(biāo)懸停時，span的寬度保持不變，同時內(nèi)部內(nèi)容向內(nèi)擠壓顯示省略號，并在右側(cè)顯示一個圖標(biāo)，類似于3….的效果。

嘗試與挑戰(zhàn)

最初的嘗試是通過JavaScript編寫一個組件，使用getBoundingClientRect獲取元素的寬度，并在內(nèi)容變化時設(shè)置固定寬度。這種方法雖然可行，但可能存在性能問題，并且實(shí)現(xiàn)起來相對復(fù)雜。我們希望找到一種更簡潔且純css的解決方案。

純CSS實(shí)現(xiàn)

通過純CSS，我們可以利用position、overflow和::before等屬性來實(shí)現(xiàn)所需的效果。以下是具體的CSS代碼和html結(jié)構(gòu)：

HTML結(jié)構(gòu)

<span class="fonttext">   ABCabcdsfes<i class="texticon">?</i>DEFGHIGK </span>

CSS樣式

.fonttext {   position: relative;   display: inline-block;   overflow: hidden;   vertical-align: bottom;   border: 2px dashed red;   box-sizing: border-box;   border-radius: 4px; }  .texticon {   position: absolute;   width: 20px;   height: 100%;   background-color: #fff;   border: 2px dashed red;   font-style: normal;   right: -21px;   border-left: none;   cursor: pointer;   border-radius: 4px;   top: -2px;   display: inline-table; }  .texticon:hover {   background-color: #2d77ed; }  .fonttext:hover {   overflow: visible;   border-top-right-radius: 0;   border-bottom-right-radius: 0;   border-right-color: transparent; }  .fonttext:hover .texticon {   border-top-left-radius: 0;   border-bottom-left-radius: 0;   border-left-color: transparent; }

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

效果說明

1. 初始狀態(tài)：在未懸停時，.fonttext的overflow屬性設(shè)置為hidden，確保內(nèi)容不會溢出。.texticon元素通過position: absolute定位在右側(cè)，但由于right: -21px，它默認(rèn)是不可見的。
2. 懸停狀態(tài)：當(dāng)鼠標(biāo)懸停在.fonttext上時，overflow變?yōu)関isible，使得內(nèi)容可以溢出顯示。同時，.texticon的right值變?yōu)?，使其顯示在span的右側(cè)。通過調(diào)整邊框和圓角，可以實(shí)現(xiàn)內(nèi)容內(nèi)縮和圖標(biāo)顯示的效果。
3. 省略號：雖然代碼中注釋掉了省略號的實(shí)現(xiàn)，但可以通過添加::before偽元素來實(shí)現(xiàn)內(nèi)容的省略效果。

通過這種方法，我們可以使用純CSS實(shí)現(xiàn)元素在懸停時寬度不變，內(nèi)容內(nèi)縮并顯示圖標(biāo)的效果。這種方法不僅簡潔高效，還能保持良好的用戶體驗(yàn)。