CSS實現單行溢出文本顯示省略号！

單行文本的控制，以前是由程序員(yuán)完成的，實現截字效果。其實我(wǒ)(wǒ)們也可以用CSS來實現該效果。
　　爲了更符合實際，我(wǒ)(wǒ)用一(yī)個div裝起要調試的内容,并爲這個div定義一(yī)個寬度。
css代碼：
　　div{width:200px;}html代碼：<div><span>CSS Web Design</span></div>

　　在IE中(zhōng)實現是非常簡單的，CSS如下(xià)：
span {
　　display:block;width:200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

　　但在FF中(zhōng)用上面的樣式是實現不了的,因爲text-overflow: ellipsis;是IE中(zhōng)特有的(非CSS标準)。現在在FF下(xià)看到的僅僅隻是把溢出的内容切除了，說到"溢出切除",這下(xià)說到點子上了，在FF中(zhōng)實現就要用到非常規的方法，一(yī)個标簽作切除内容，再加一(yī)個标簽作填補省略号用，并且加起來的長度就能超過容器的寬度，本例指的就是DIV的寬度200px，實現的想法就是這樣。那麽繼續進一(yī)試驗，關于切除内容，這個已經基本上解決了，那就來說補省略号，不用JS，用CSS實現的話(huà)就要用到僞對象after,僞對象不懂的就要先去(qù)溫故或百度一(yī)下(xià)。先從HTML下(xià)手，爲span标簽外(wài)再加一(yī)層p标簽(當然你也可以加其它标簽的)
　　html代碼：<div><p><span>CSS Web Design我(wǒ)(wǒ)愛CSS-Web标準化Div+css教程</span><p></div>

　　我(wǒ)(wǒ)們再爲這個P标簽加樣式。
CSS：
　　p:after{content:"...";}

　　這樣還不行，因爲省略号是有寬度的，這樣省略号就跳到一(yī)下(xià)行了，下(xià)面要做的就是讓span加省略号的寬度不大(dà)于容器寬度(準确的說是相等)，并且讓省略号緊跟内容的内容，下(xià)就是解決上面這些問題的CSS樣式：
　　p{clear:both;}p span{float:left;max-width:175px;}p:after{content:"...";}

　　這裏還要補充的一(yī)點是關于p span的寬度用了"max-width"這個屬性，IE不能解釋該屬性，而FF可以,這樣就避開(kāi)了IE對SPAN寬度的重新應用。上面說得有亂，歸納如下(xià)：
　　html代碼：<div><p><span>CSS Web Design</span><p></div>
　　css代碼：div{width:200px;/*容器的基本定義*/height:200px;background-color:#eee;}/* IE下(xià)的樣式*/ p span{display: block;width:200px;/*對寬度的定義,根據情況修改*/overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}/* FF下(xià)的樣式*/ p{clear:both;}p span{float:left;max-width:175px;}p:after{content:"...";}