談談text-overflow的那些坑和應對方法

nodejh 發布于2019-08-29 16:26 / 1792人閱讀

摘要：基本語法默認值，將溢出的文本裁減掉將溢出的文本用省略號來表示設置一個字符串用來表示溢出的文本兼容性上，除了外，其余兩個屬性兼容到了，所以大可放心使用。

原文地址：https://www.xksblog.top/the-p...

text-overflow是CSS3中的屬性，它規定了當文本溢出其包含元素時以何種方式顯示。但在使用的時候，有時會發現這個text-overflow設置了屬性怎么不起作用呀？現在我們就來踩踩這里面的坑。

text-overflow 基本語法

text-overflow: [ clip | ellipsis | ]{1,2}

clip：默認值，將溢出的文本裁減掉

ellipsis：將溢出的文本用省略號(...)來表示

：設置一個字符串用來表示溢出的文本

兼容性上，除了外，其余兩個屬性兼容到了IE6+，所以大可放心使用。

text-overflow: ellipsis;  /* IE 6, WebKit (Safari, Chrome), Firefox 7, Opera 11 */
-o-text-overflow: ellipsis;  /* Opera 9-10 */

text-overflow的那些坑 1. 溢出？不關我的事

text-overflow只是規定了文本溢出后的顯示樣式，但它不會強制文本溢出，這也就是很多時候，我們雖然設置了text-overflow: ellipsis，但文本其實沒有表現出"溢出"特性，所以當然也就不起作用。

解決方法：

width: 100%;  /*也可以是固定值、min-width這些*/
white-space: nowrap;  /*強制文本不能換行*/
overflow: hidden;  /*隱藏溢出內容*/
text-overflow: ellipsis;

如果是、這種行內元素，請再加上display: block，因為行內元素的默認寬度就是文字的寬度且無法設置width

2. 單行溢出 VS 多行溢出

效果對比：

相比單行溢出，多行溢出就要更為復雜一點，要用到伸縮盒子的概念：display: -webkit-box;。

估計也就這時候能看到這個概念了，現在display:flex已經取代了box這種不正規的寫法。

具體代碼參考：

width: 100%;
overflow: hidden;
word-break: break-all;  /*允許在單詞內換行，更美觀*/
text-overflow: ellipsis;
display: -webkit-box;  /*元素作為box伸縮盒子*/
-webkit-line-clamp: 3;  /*設置文本行數限制*/
-webkit-box-orient: vertical;  /*設置文本排列方式*/

這個方法合適WebKit瀏覽器以及移動端，其他瀏覽器的實現方案可以參考以下文章：

關于文字內容溢出用點點點(…)省略號表示
黑科技：CSS 定制多行省略
多行文本溢出顯示省略號(…)全攻略

以上是我對text-overflow的一些淺顯理解，哪里有錯誤之處還望指正。更多進階高能的方法在上面的參考文章中都有提到，等以后用到了再好好研究下。

學習總是由淺入深，也沒辦法一下子吃成個大胖子，希望以后能不斷重構自己的知識體系，分享更有深度的文章~

云服務器 GPU云服務器談談對php的理解 webrtc是怎樣應對網絡變化的 text-overflow 那些奇怪的錯誤

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113745.html

談談如何用CSS處理文本格式

摘要：一個長單詞超出整個容器寬度時是否換行必須注意到，這是一個長單詞便超出容器寬度的情況，而且只需考慮英文，中文沒有此特性。規定如何處理內容溢出容器屬性作用于型元素上。前言文本方面的CSS內容不少，但只要是用過一下office word來編輯過文章的童鞋都能輕易理解其中的大部分。那么，今天僅僅來談談其中最復雜的部分——文本格式。處理換行、空格和Tab：white-space 眾所周知，...

source 2019-08-28 18:28 評論0 收藏0
前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
快收藏！52篇25萬字，微服務、云原生、容器、K8S、Serverless精華文章集錦

摘要：正在走遠，新年之初，小數精選過去一年閱讀量居高的技術干貨，從容器到微服務云原生，匯集成篇精華集錦，充分反映了這一年的技術熱點走向。此文值得收藏，方便隨時搜索和查看。，小數將繼續陪伴大家，為朋友們奉獻更有逼格的技術內容。 2017正在走遠，新年之初，小數精選過去一年閱讀量居高的技術干貨，從容器、K8S 到微服務、云原生、Service Mesh，匯集成52篇精華集錦，充分反映了這一年的技...

AaronYuan 2019-07-01 16:38 評論0 收藏0
面試試題總結

摘要：閑心面試題一任選一題分的區別的區別是無序列表，是有序列表，是定義列表有層次關系。無任何語義，僅僅用作樣式化或者腳本化的鉤子是有一定語義的，適合有主題性的內容，表示一個專題，一般有標題，但是不可以亂用。誕生于年，由等人創建，后為所收購。閑心面試題一、任選一題（5分）a) ul、ol、dl的區別？b) div、section、article的區別？ a:ul是無序列表，ol是有序列表，...

alaege 2019-08-19 18:05 評論0 收藏0
談談機器學習與傳統編程之間的區別

摘要：機器學習也是這個大筐中的一個組成部分。我們目前的發展階段是機器學習正處在第二級和第三級交界處。機器學習工程師的職位是怎樣的機器學習工程師的位置更具有技術性。換句話說，機器學習工程師與傳統的軟件工程有著比數據科學更多的相同點。翻譯：瘋狂的技術宅https://towardsdatascience.co... showImg(https://segmentfault.com/img/b...

王巖威 2019-06-26 18:58 評論0 收藏0