css代碼：
div{
width:200px;/*容器的基本定義*/
height:200px;
background-color:#eee;
}
/* IE下的樣式 */
p span{
display: block;
width:200px;/*對寬度的定義,根據情況修改*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* FF 下的樣式 */
p{clear:both;}
p span{
float:left;
max-width:175px; /*IE不能解釋該屬性，而FF可以*/
}
p:after{
content:"...";
}
================================================
以下是詳細過程，想繼續學習的請往下看，不想學的請直接用上面的結果就可以了。
--------------------------------------------------------------
學習篇：
今天有朋友在52css.com的留言板提出一個問題：為什麼 text-overflow:ellipsis的時候沒有任何效果呀？text-overflow是一個比較特殊的屬性，在CSS手冊中，這個屬性是這樣定義的：
文法：
text-overflow : clip | ellipsis
參數：
clip : 不顯示省略標記（...），而是簡單的裁切
（clip這個參數是不常用的！）
ellipsis : 當對象內文本溢出時顯示省略標記（...）
說明：
設定或檢索是否使用一個省略標記（...）標示對象內文本的溢出。
請您注意，text-overflow:ellipsis屬性在FF中是沒有效果的。
樣本：
div { text-overflow : clip; }
text-overflow是一個比較特殊的樣式，我們可以用它代替我們通常所用的標題截取函數，而且這樣做對搜尋引擎更加友好，如：標題檔案有50 個漢字，而我們的列表可能只有300px的寬度。如果用標題截取函數，則標題不是完整的，如果我們用CSS樣式text- overflow:ellipsis，輸出的標題是完整的，只是受容器大小的局限不顯示出來罷了。
關於text-overflow屬性如何應用，我們作如下的說明講解：
text-overflow屬性僅是註解，當文本溢出時是否顯示省略標記。並不具備其它的樣式屬性定義。我們想要實現溢出時產生省略符號的效果。還必須定義：強制文本在一行內顯示（white-space:nowrap）及溢出內容為隱藏（overflow:hidden）。只有這樣才能實現溢出文本顯示省略符號的效果。
我們首頁建立了一個無序列表UL，裡面有幾個清單項目LI，內部建立了列錶鏈接A。我們的測試主要在LI在進行，請注意觀察，看如下的三段代碼：
一、僅定義text-overflow:ellipsis; 不能實現省略符號效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>52CSS</title>
<style type="text/css">
ul {width:300px; margin:50px auto;}
li {width:300px; line-height:25px; text-overflow:ellipsis;}
a {color:#03c; font-size:13px;}
a:hover {color:#000;}
</style>
</head>
<body>
<ul>
<li><a href="http://www.52css.com/">CSS實戰精萃 - Pro CSS Techniques </a>
<li><a href="http://www.52css.com/">CSS實戰：id是狙擊槍 class是雙刃劍 合則兩利分則兩敗</a>
<li><a href="http://www.52css.com/">CSS布局執行個體：CSS標籤切換代碼執行個體教程</a>
<li><a href="http://www.52css.com/">Web標準：改變您的網頁製作思維方式 節省代碼及結構與表現分離</a>
<li><a href="http://www.52css.com/">解決IE7以下版本不支援無A狀態偽類的幾種方法！</a>
<li><a href="http://www.52css.com/">CSS去除表格td預設間距及製作1px細線表格 </a>
</ul>
</body>
</html>
二、定義text-overflow:ellipsis; white-space:nowrap; 同樣不能實現省略符號效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>52CSS</title>
<style type="text/css">
ul {width:300px; margin:50px auto;}
li {width:300px; line-height:25px;
text-overflow:ellipsis; white-space:nowrap;}
a {color:#03c; font-size:13px;}
a:hover {color:#000;}
</style>
</head>
<body>
<ul>
<li><a href="http://www.52css.com/">CSS實戰精萃 - Pro CSS Techniques </a>
<li><a href="http://www.52css.com/">CSS實戰：id是狙擊槍 class是雙刃劍 合則兩利分則兩敗</a>
<li><a href="http://www.52css.com/">CSS布局執行個體：CSS標籤切換代碼執行個體教程</a>
<li><a href="http://www.52css.com/">Web標準：改變您的網頁製作思維方式 節省代碼及結構與表現分離</a>
<li><a href="http://www.52css.com/">解決IE7以下版本不支援無A狀態偽類的幾種方法！</a>
<li><a href="http://www.52css.com/">CSS去除表格td預設間距及製作1px細線表格 </a>
</ul>
</body>
</html>
三、按52css.com的教程，即本文所講的方法，同時應用： text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 實現了所想要得到的溢出文本顯示省略符號效果：
不過請注意此方法適用與IE與OP瀏覽器，FF不適用！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>52CSS</title>
<style type="text/css">
ul {width:300px; margin:50px auto;}
li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
a {color:#03c; font-size:13px;}
a:hover {color:#000;}
</style>
</head>
<body>
<ul>
<li><a href="http://www.52css.com/">CSS實戰精萃 - Pro CSS Techniques </a>
<li><a href="http://www.52css.com/">CSS實戰：id是狙擊槍 class是雙刃劍 合則兩利分則兩敗</a>
<li><a href="http://www.52css.com/">CSS布局執行個體：CSS標籤切換代碼執行個體教程</a>
<li><a href="http://www.52css.com/">Web標準：改變您的網頁製作思維方式 節省代碼及結構與表現分離</a>
<li><a href="http://www.52css.com/">解決IE7以下版本不支援無A狀態偽類的幾種方法！</a>
<li><a href="http://www.52css.com/">CSS去除表格td預設間距及製作1px細線表格 </a>
</ul>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------
實際解決問題篇：
（可能還不是很完美，僅供大家參考。）
單行文本的控制，以前是由程式員完成的，實現截字效果。
在52css.com以前的文字中，也介紹過，通過CSS也實現這樣的效果：
如何設定列表(li)超出部分顯示省略符號？
http://www.52css.com/article.asp?id=148
CSS基礎：text-overflow:ellipsis溢出文本顯示省略符號的詳細方法
http://www.52css.com/article.asp?id=602（上面所寫的學習篇就是以上兩個串連的內容）
上面的兩種方法是以前介紹給大家的。它們存在著一定的局限，只能對IE起效果，而在FF下時無效的。
在FF下面，是直接截斷文字，不會加上“…”。今天介紹的方法相容IE FF，看下面的詳細介紹：
為了更符合實際，我用一個div裝起要調試的內容,並為這個div定義一個寬度。
例如：
css代碼：
div{width:200px;}
html代碼：
<div>
<span>CSS Web Design 我愛CSS-Web標準化 Div+css教程 - www.52css.com</span>
</div>
在IE中實現是非常簡單的，CSS 如下：
Example Source Code [www.52css.com]span {但在FF中用上面的樣式是實現不了的,因為text-overflow: ellipsis;是IE中特有的(非CSS標準)。現在在FF下看到的僅僅只是把溢出的內容切除了，說到"溢出切除",這下說到點子上了，在FF中實現就要用到非常規的方法:一個標籤作切除內容，再加一個標籤作填補省略符號用，並且加起來的長度就能超過容器的寬度，本例指的就是DIV的寬度200px，實現的想法就是這樣。
那麼繼續進一實驗，關於切除內容，這個已經基本上解決了，那就來說補省略符號，不用JS，用CSS實現的話就要用到偽對象after,偽對象不懂的就要先去溫故或百度一下。先從HTML下手，為span標籤外再加一層p標籤（當然你也可以加其它標籤的）
Example Source Code [www.52css.com]html代碼：我們再為這個P標籤加樣式。
Example Source Code [www.52css.com]CSS：這樣還不行，因為省略符號是有寬度的，這樣省略符號就跳到一下行了，下面要做的就是讓span 加省略符號的寬度不大於容器寬度(準確的說是相等)，並且讓省略符號緊跟內容的內容，下面就是解決上面這些問題的CSS樣式：
Example Source Code [www.52css.com]p{clear:both;}這裡還要補充的一點是關於p span 的寬度用了"max-width"這個屬性，IE不能解釋該屬性，而FF可以,這樣就避開了IE對SPAN寬度的重新應用。上面說得有亂，歸納如下：
Example Source Code [www.52css.com]html代碼：css代碼：
div{
width:200px;/*容器的基本定義*/
height:200px;
background-color:#eee;
}
/* IE下的樣式 */
p span{
display: block;
width:200px;/*對寬度的定義,根據情況修改*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* FF 下的樣式 */
p{clear:both;}
p span{
float:left;
max-width:175px; /*IE不能解釋該屬性，而FF可以*/
}
p:after{
content:"...";
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
