我們在浏覽網頁的時候，經常能看到這樣的效果：當文字超出一定范圍時會以省略號顯示，並隱藏多余的文字，如下圖：
圖1 省略號效果顯示文字
這也是一個用戶體驗非常好的設計細節，可以讓用戶知道還有更詳細的內容。
在CSS3中，文本溢出text-overflow用於設置是否使用一個省略標記（…）標示對象內文本的溢出。
語法：
text-overflow:取值;
說明：
text-overflow屬性取值只有2個：
單獨使用text-overflow屬性是無法得到上面圖1效果的。因為text-overflow屬性只是說明文字溢出時用什麼方式顯示，要實現溢出時產生省略號效果，還須定義2個內容：
下面是完整語法：
text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
這3個屬性是必須一起使用才會有效果。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 text-overflow屬性</title>
<style type="text/css">
#div1
{
width:200px;
height:100px;
border:1px solid gray;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
</style>
</head>
<body>
<div id="div1"> 學習網成立於2015年4月1日，是一個富有活力的技術學習網站。 學習網為廣大網絡工作者（網頁開發人員、站長等）提供各種精品教程以及最精華資料。 學習網跟其他垃圾采集站不一樣， 學習網中的每一個課程、每一篇文章，甚至每一個知識點，都凝聚了本人的最辛勤的汗水。</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
由於使用了“white-space:nowrap;”，所有文字都放在了同一行（不換行），然後再使用“text-overflow:ellipsis;”使得溢出該行的部分以省略號形式顯示。
但是如果我們想要實現下面這種效果，該怎麼辦呢？
在上面效果中，文字並非都在同一行，我們只是限定某個容器的寬度和高度，對於超出的部分我們再使用省略號顯示。想要實現這種效果，暫時是無法使用CSS來實現的，必須要借助JavaScript或jQuery才行。希望大家關注站長的新教程“jQuery入門教程”，有機會再在裡面給大家分享一下實現技巧。
疑問1、有人問，我減少一點文字就沒有溢出了嗎，搞毛線還用text-overflow屬性來對溢出內容進行處理這麼麻煩呢？
哈哈，這個問題問得相當好！其實是這樣的，為了整體布局固定，很多欄目的寬度和高度是固定的，並且做過後端的朋友都知道，對於網站欄目內容更新，我們往往都不會傻乎乎地手動更新，而是使用後台數據庫來自動更新前台數據。由於在給數據庫錄入數據的時候，為了節省時間，我們都是隨便摘取一段描述性文字錄進去就行了，不會考慮前台元素寬度和高度是多少，能容得下多少文字。所以在前台中，我們必須要對元素內容進行溢出處理（如果是僅僅搞前端的話，沒辦法理解這段話也沒關系，記得有這麼一回事就行了）。