CSS實現文字超出寬度顯示省略符號

單行文本的控制，以前是由程式員完成的，實現截字效果。今天介紹的方法相容IE和FF，看下面的詳細介紹。為了更符合實際，用一個div裝起要調試的內容，並為這個div定義一個寬度。例如：
單行文本的控制，以前是由程式員完成的，實現截字效果。今天介紹的方法相容IE和FF，看下面的詳細介紹。為了更符合實際，用一個div裝起要調試的內容，並為這個div定義一個寬度。例如：

css代碼：
div{width:200px;}

html代碼：
<div>
<span>中國站長天空，站長建站樂園 - www.zzsky</span>
</div>

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

css代碼：
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標籤（當然你也可以加其它標籤的）。

html代碼：
<div>
<p><span>中國站長天空，站長建站樂園 - www.zzsky</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>中國站長天空，站長建站樂園 - www.zzsky</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:"...";
}