1. 程式人生 > >CSS 單行溢位文字顯示省略號...的方法(相容IE FF)

CSS 單行溢位文字顯示省略號...的方法(相容IE FF)

學習篇:

今天有朋友在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:"...";
}