CSS 單行溢出文本顯示省略號...的方法（兼容IE FF）（轉）

時間 2020-08-11

標籤 css 單行溢出文本顯示省略號方法兼容欄目 CSS 简体版

原文原文鏈接

html代碼：
<div>
<p><span>CSS Web Design 我愛CSS-Web標準化 Div+css教程 - www.52css.com</span><p>
</div>

css代碼：
div{
width:200px;/*容器的基本定義*/
height:200px;

}

/* 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:"...";
}

================================================
如下是詳細過程，想繼續學習的請往下看，不想學的請直接用上面的結果就能夠了。
--------------------------------------------------------------
學習篇：css

今天有朋友在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）。只有這樣才能實現溢出文本顯示省略號的效果。html

咱們首頁創建了一個無序列表UL，裏面有幾個列表項LI，內部創建了列表連接A。咱們的測試主要在LI在進行，請注意觀察，看以下的三段代碼：
1、僅定義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>
2、定義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>
　3、按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 以下：

瀏覽器