CSS 單行溢位文字顯示省略號...的方法（相容IE FF）
阿新 • • 發佈：2019-01-27
學習篇：
今天有朋友在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/%22%3ECSS實戰精萃 - Pro CSS Techniques </a>
<li><a href="http://www.52css.com/%22%3ECSS實戰：id是狙擊槍 class是雙刃劍 合則兩利分則兩敗</a>
<li><a href="http://www.52css.com/%22%3ECSS佈局例項：CSS標籤切換程式碼例項教程</a>
<li><a href="http://www.52css.com/%22%3EWeb標準：改變您的網頁製作思維方式 節省程式碼及結構與表現分離</a>
<li><a href="http://www.52css.com/">解決IE7以下版本不支援無A狀態偽類的幾種方法！</a>
<li><a href="http://www.52css.com/%22%3ECSS去除表格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/%22%3ECSS實戰精萃 - Pro CSS Techniques </a>
<li><a href="http://www.52css.com/%22%3ECSS實戰：id是狙擊槍 class是雙刃劍 合則兩利分則兩敗</a>
<li><a href="http://www.52css.com/%22%3ECSS佈局例項：CSS標籤切換程式碼例項教程</a>
<li><a href="http://www.52css.com/%22%3EWeb標準：改變您的網頁製作思維方式 節省程式碼及結構與表現分離</a>
<li><a href="http://www.52css.com/">解決IE7以下版本不支援無A狀態偽類的幾種方法！</a>
<li><a href="http://www.52css.com/%22%3ECSS去除表格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/%22%3ECSS實戰精萃 - Pro CSS Techniques </a>
<li><a href="http://www.52css.com/%22%3ECSS實戰：id是狙擊槍 class是雙刃劍 合則兩利分則兩敗</a>
<li><a href="http://www.52css.com/%22%3ECSS佈局例項：CSS標籤切換程式碼例項教程</a>
<li><a href="http://www.52css.com/%22%3EWeb標準：改變您的網頁製作思維方式 節省程式碼及結構與表現分離</a>
<li><a href="http://www.52css.com/">解決IE7以下版本不支援無A狀態偽類的幾種方法！</a>
<li><a href="http://www.52css.com/%22%3ECSS去除表格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 {
display:block;
width:200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
但在FF中用上面的樣式是實現不了的,因為text-overflow: ellipsis;是IE中特有的(非CSS標準)。現在在FF下看到的僅僅只是把溢位的內容切除了，說到"溢位切除",這下說到點子上了，在FF中實現就要用到非常規的方法:一個標籤作切除內容，再加一個標籤作填補省略號用，並且加起來的長度就能超過容器的寬度，本例指的就是DIV的寬度200px，實現的想法就是這樣。
那麼繼續進一試驗，關於切除內容，這個已經基本上解決了，那就來說補省略號，不用JS，用CSS實現的話就要用到偽物件after,偽物件不懂的就要先去溫故或百度一下。先從HTML下手，為span標籤外再加一層p標籤（當然你也可以加其它標籤的）
Example Source Code [www.52css.com] html程式碼：
<div>
<p><span>CSS Web Design 我愛CSS-Web標準化 Div+css教程 - www.52css.com</span><p>
</div>
我們再為這個P標籤加樣式。
Example Source Code [www.52css.com] CSS：
p:after{
content:"...";
}
這樣還不行，因為省略號是有寬度的，這樣省略號就跳到一下行了，下面要做的就是讓span 加省略號的寬度不大於容器寬度(準確的說是相等)，並且讓省略號緊跟內容的內容，下面就是解決上面這些問題的CSS樣式：
Example Source Code [www.52css.com] p{clear:both;}
p span{
float:left;
max-width:175px;
}
p:after{
content:"...";
}
這裡還要補充的一點是關於p span 的寬度用了"max-width"這個屬性，IE不能解釋該屬性，而FF可以,這樣就避開了IE對SPAN寬度的重新應用。上面說得有亂，歸納如下：
Example Source Code [www.52css.com] html程式碼：
<div>
<p><span>CSS Web Design 我愛CSS-Web標準化 Div+css教程 - www.52css.com</span><p>
</div>
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:"...";
}