CSS 单行溢出文本显示省略号...的方法（兼容IE FF）（转）
?
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:"...";
}
================================================
以下是詳細過程，想繼續學習的請往下看，不想學的請直接用上面的結果就可以了。
--------------------------------------------------------------
學習篇：
今天有朋友在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>
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:"...";
}
轉載于:https://www.cnblogs.com/acis_/archive/2010/05/10/1731983.html
總結
以上是生活随笔為你收集整理的CSS 单行溢出文本显示省略号...的方法（兼容IE FF）（转）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 商业周刊:摩托罗拉下注Android 不
- 下一篇： 20个很酷的CSS3导航菜单制作教程