用css實現文字超出指定寬度顯示省略號(...)

當文字標題比較長,一行顯示不下時,可以用省略號來代替,以前是用程序來寫,現在用css即可搞定,兼容ie和firefox.看下面代碼: 

html代碼： 

<div> 
<span>這里是覺悟的屌絲_白小蟲的博客</span> 
</div> 

css代碼： 

div{width:200px;} 

在IE中實現是非常簡單的： 
css代碼： 

span { 
display:block; 
width:200px; 
overflow: hidden; 
white-space: nowrap; 
text-overflow: ellipsis; 
} 

但在Firefox中用上面的樣式是實現不了的,因為text-overflow: ellipsis;是IE中特有的（非CSS標准）。現在在FF下看到的僅僅只是把溢出的內容切除了，說到“溢出切除”，這下說到點子上了，在FF中實現就要用到非常規的方法，一個標簽作切除內容，再加一個標簽作填補省略號用，並且加起來的長度就能超過容器的寬度，本例指的就是DIV的寬度200px，實現的想法就是這樣。那么繼續進一試驗，關於切除內容，這個已經基本上解決了，那就來說補省略號，不用JS，用CSS實現的話就要用到偽對象after，偽對象不懂的就要先去溫故或百度一下。先從HTML下手，為span標簽外再加一層p標簽（當然你也可以加其它標簽的）。 
html代碼： 

<div> 
<p><span>這里是覺悟的屌絲_白小蟲的博客</span><p> 
</div> 

我們再為這個P標簽加樣式： 
css代碼： 

p:after{ 
content:"..."; 
} 

這樣還不行，因為省略號是有寬度的，這樣省略號就跳到一下行了，下面要做的就是讓span加省略號的寬度不大於容器寬度（准確的說是相等），並且讓省略號緊跟內容的內容，下面就是解決上面這些問題的CSS樣式： 
css代碼： 

p{clear:both;} 
p span{ 
float:left; 
max-width:175px; 
} 
p:after{ 
content:"..."; 
}

這里還要補充的一點是關於p和span的寬度用了“max-width”這個屬性，IE不能解釋該屬性，而FF可以，這樣就避開了IE對SPAN寬度的重新應用。上面說得有亂，歸納如下： 
html代碼： 

<div> 
<p><span>php自學網-http://www.phpzixue.cn/</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; 
} 
p:after{ 
content:"..."; 
}