這是我又一次探究文字溢出相關問題，也是我在用戶體驗道路上踏出的又一小步。

之前提到“文字溢出”瞬間就能想到 ellipsis。再接觸的多了一點會同時想到 display: -webkit-box;（多行溢出）。
你一定欣喜若狂，認為掌握了“宇宙之玄妙”，擁有了“制勝之法寶”。但是如果你就此而去，你仍會時不時的發出疑問：“為什么我的溢出省略沒有生效？”

先說，目前已知的所有相關問題最終都可以歸結為一個點上：行內樣式與塊級樣式。
包括一個很可惜的、似乎還沒有文章給出具體說明的一個問題 —— flex！

flex與行內元素

你可能會疑惑，那是因為你只停留在“用”的階段。
事實上，早在某一篇文章中筆者就發表過觀點：flex會將元素變為既具有行內某些特點又具有行內塊部分特性的樣式結構。這一點很關鍵 —— 可以結合position等屬性做出意想不到的效果。

筆者后面寫過很多“詳解”，但再看下來竟都不如這個當初隨手畫下的說明更清晰。按圖中說明稍加思考或實踐一下你也會恍然大悟。

flex與文字溢出

在我司的一個項目中有這樣一個場景(代碼來源于真實場景和研究，已做脫敏)：
商家側某活動已選商品展示如果只有一個商品后面的文字要限制在一定區域，溢出省略效果 ——

但筆者接手初期是這樣的：

的確，多行展示確實能帶給用戶比單行展示更多的體驗感，但上一個前輩用了這個東西： display: -webkit-box;！webkit前綴！所以在文字極多且非webkit的瀏覽器中是這樣的：

當然這種場景幾乎是很少見的，所以以至于一直保持這樣；又當然可以用偽元素偽造“…”去解決，但是效果太生硬。一般不會直接去使用而是優先考慮其它方案(產品的勝利😏)。

現在問題來了，這是一個flex布局模型，基礎結構如下：

<!-- 當展示只有一個時 --> <div class="cisi__list list-single" v-if="total === 1" @click="xxx"><div class="cisi__img"><img :src="flist[0].imgHead | formatPicSelf(100)" v-img-error-item-self><!-- 提示圖標 --><span class="pie__item-tag" v-if="flist[0].statusError">{{flist[0].statusError}}</span></div><div class="cisi__text-line"><span>{{flist[0].itemName}}</span></div> </div>

其主要的css結構如下：

/** 最外面的父元素規定了大體樣式和寬高，然后 **/ .cisi__list {margin-top: 8px;height: 64px;display: flex;align-items: center;cursor: pointer; } /** ... **/ .cisi__text-line {flex: auto;font-family: PingFangSC-Regular;font-size: 14px;color: #000000;letter-spacing: 0;line-height: 22px;& span {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} }

溢出省略竟然失效！怎么回事？

要理解省略效果為什么沒出現，需要搞清楚這里的尺寸計算規則 —— 最終尺寸、最大最小尺寸。這里cisi__text-line類名的 div 屬于 flex 子項，它的最終尺寸由基礎尺寸、彈性增長或收縮、以及最小最大尺寸決定！
在這個例子中，出現了幾個情況：

width 屬性和 flex-basis 屬性都沒有設置，因此基礎尺寸就是內容尺寸，內容尺寸是最大內容寬度，也就是 div 里面內容在一行顯示的寬度；

flex-shrink 屬性值是 1（因為默認值是1），內容超出了，因此彈性收縮是執行了的（flex-grow默認是0不會隨內容拉伸，父元素設置了寬度整體的寬度無法超過某個值但 span 元素不受限超出了這時外面的 div 就像失去了對子元素的掌控一樣）。

但理論上講如果彈性收縮執行了應該是出現省略效果的。那問題只能出現這個對子元素失去掌控的 div 上了：

因為有關寬度的屬性都沒有設置，因此最小尺寸就是最小內容寬度。就是這里出了問題：如果 div 里面的 span 元素沒有設置white-space: nowrap;，那么最小寬度就是1em，即一個中文字符的寬度（因為每個中文字符都是換行點），彈性收縮可以順利執行。但是這里設置了white-space屬性，此時的 span 元素就像一個不會換行的連續英文單詞，于是 div 元素的最小尺寸就變成了 span 元素內容在一行中顯示的寬度，和上面的“基本尺寸”一樣！

由于最終尺寸計算時的優先級是最小尺寸 > 彈性收縮 > 基本尺寸，而最小尺寸和基本尺寸是相等的，所以彈性收縮無效，最終尺寸就是內容寬度。而單行溢出省略的效果需要內容寬度大于容器寬度，所以沒有顯示出來。

所以要想得到正確的效果，我們可以這么做：
給子元素設置比文字內容寬度小的一個寬度值，或是給父元素(比如這里 span 上的 div)設置一個非常非常小的最小尺寸，使得彈性模型可以正常收縮(使子元素無論如何大于父元素尺寸)。

.cisi__text-line {/**...**/min-width: 0;/**...**/ }

或者：

.cisi__text-line {/**...**/overflow: hidden;/**...**/ }

但是需要注意：設置 overflow 會影響flex-basis或有position屬性的布局！

不知道你是否注意過控制臺查看器中的這個部分：

這是上面錯誤顯示時的樣子。而在我們做出改變后是這樣的：

和行內元素有什么關系？

上面的最終效果是這樣的：

注意：此時并沒有省略號效果的出現，而且只有在overflow下才會出現“溢出隱藏”，設置min-width并沒有什么作用！

這時去掉white-space 屬性是這樣展示的：

看到了嗎？span 是行內元素，一般單獨修飾文字。行內元素的標志就是“只作用于元素本身”，而塊級元素通常會將元素所在區域當做一個整體！
溢出省略效果是針對一個“區域”來說的，你可以理解為“它實際上并不修改元素本身”。

所以這里需要將 span 改為 p 元素，就能正確呈現效果了！

由此引出的體驗優化思考

就像案例開頭說的一樣，多行顯示的效果一定要比單行顯示的好，哪怕你有一些花里胡哨的搭配。但這里多行溢出的屬性兼容性并不好。
這是一個抉擇，兼容性與一定程度上的用戶視覺體驗相比。
你可以選擇使用單行省略，或是盡可能地優化“用兼容的屬性模擬未兼容屬性”的美觀程度。或是在源頭處 —— 設置時限制活動/商品名稱的長度，當然，這個也必然是犧牲了 yi 點點用戶體驗的。

在這個項目的列表頁，筆者采用了另一種方法：

列表項是以行為維度的，通過增加行高去解決文字溢出后看不見的效果 —— 也就是強制換行。flex中應該是默認這樣的~
否則，會出現什么效果呢？這就要和flex本身的“缺陷”掛🪝了…

and 順便提一下，你覺得下面的三種實現在它們所在的場景中，哪種更合適呢？

---

相關鏈接：

小Tip：關于單行/多行文本溢出隱藏的一些看法

三探【文字溢出省略】：純css實現“任意行數”截斷處理(新！)

一種離譜到極致的頁面側邊欄效果探究

總結

以上是生活随笔為你收集整理的文字溢出省略和用户体验优化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。