此為轉載，原文地址
項目中常常有這種需要我們對溢出文本進行"..."顯示的操作，單行多行的情況都有（具體幾行得看設計師心情了），這篇隨筆是我個人對這種情況解決辦法的歸納，歡迎各路英雄指教。
單行
語法
overflow:hidden; text-overflow:ellipsis; white-space:nowrap示例
文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略號
多行
1.直接用css屬性設置(只有-webkit內核才有作用)
語法
overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;移動端瀏覽器絕大部分是WebKit內核的，所以該方法適用於移動端；
-
-webkit-line-clamp 用來限制在一個塊元素顯示的文本的行數,這是一個不規范的屬性（unsupported WebKit property），它沒有出現在 CSS 規范草案中。
-
display: -webkit-box 將對象作為彈性伸縮盒子模型顯示 。
-
-webkit-box-orient 設置或檢索伸縮盒對象的子元素的排列方式 。
-
text-overflow: ellipsis 以用來多行文本的情況下，用省略號“…”隱藏超出范圍的文本。
示例
文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略
2.利用偽類
語法
<div id="con"> <span id="txt">文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略</span> <span class="t"></span> </div> <style> #txt{ display: inline-block; height: 40px; width: 250px; line-height: 20px; overflow: hidden; font-size: 16px; } .t:after{ display: inline; content: "..."; font-size: 16px; } </style>示例
文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略
3.利用絕對定位和padding;(跨瀏覽器解決方案)
看到上例是不是覺得“哇，終於可以跨瀏覽器使用了”，但你這樣想的時候有沒有考慮過IE的感受？IE6/7是沒有偽類的，還不趕快跪下對IE叫聲“大哥”，雖然IE6已經退出市場，但是IE7還是需要兼容的，所以呢，我自己又想到了以下的辦法，我這邊測試了下感覺還行。
上代碼
<p id="con2">文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略<span class="t2">...</span> </p> <style> #con2{ position: relative; height: 40px; width: 250px; line-height: 20px; overflow: hidden; padding-right: 12px; } .t2{ position: absolute; right: 0; bottom: 0; } </style>這個方法的原理是：首先在包含文字的元素里，嵌入一個<span>...</span>，然后包含文字的元素右側留出...的位置(padding-right),最后利用絕對定位將...定位至右側的padding-right區域
示例
文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略號,文本溢出顯示省略...
4.其他
利用js插件來實現該功能，這里有倆款插件推薦，這篇主要介紹的是css方法，所以它們使用方法就不廢話了。
問題
感謝村長指出了第二種和第三種都沒有考慮到內容不足倆行的情況，這種情況下，我的上面說到的第二種和第三種方法，“...”依舊會存在，並不會隱藏。暫時還沒有想出利用css來實現不到倆行隱藏的辦法，sorry。所以如果存在不到倆行的情況盡量還是不要用了吧，可以使用js。這個就先放在這兒，什么時候想到辦法再來修改
function mitulineHide(num,con){ var contain = document.getElementById(con); console.log(con); var maxSize = num; var txt = contain.innerHTML; if(txt.length>num){ console.log('1') txt = txt.substring(0,num-1)+"..." contain.innerHTML = txt; }else{ console.log("error") }