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

原文：https://segmentfault.com/a/1190000016089746

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

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

text-overflow 基本語法

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

• clip：默認值，將溢出的文本裁減掉
• ellipsis：將溢出的文本用省略號(...)來表示
• <string>：設置一個字符串用來表示溢出的文本

兼容性上，除了<string>外，其余兩個屬性兼容到了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;

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

2. 單行溢出 VS 多行溢出

效果對比：
<script async src="//jsfiddle.net/stay1100/zxrfy5gj/embed/result,html,css/dark/"></script>

相比單行溢出，多行溢出就要更為復雜一點，要用到伸縮盒子的概念：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的一些淺顯理解，哪里有錯誤之處還望指正。更多進階高能的方法在上面的參考文章中都有提到，等以后用到了再好好研究下。

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