用CSS就能完美解決文字溢出的處理辦法
經常會在項目中碰到文字溢出的情況，解決起來也比較麻煩，而最大的麻煩還是在瀏覽器的兼容問題上。至少到目前為止，我還沒找到用CSS就能完美解決文字溢出的辦法。前幾天就再次碰到這個問題，之后一查，發(fā)現(xiàn)和迅雷的一個頁面重構的面試題驚奇的相似，仔細一想，也沒啥巧合不巧合的，只能說這種情況太常見了。
要求是這樣的：一個新聞列表，新聞標題后緊跟著日期，新聞標題的寬度超過一定的寬度就要自動截斷，但是日期必須顯示完整。
花了點時間研究了下，最終的效果對于瀏覽器的兼容不是很理想，但我覺得也是很不錯了。
查看演示
看到這個要求，基本上就知道HTML的結構該怎么寫了，一個有序列表(ol+li)：
- 毛毛貓系列漫畫2010-09-18
- 一個網(wǎng)頁設計需求方眼中的網(wǎng)頁設計2010-09-18
- 如何應對騙稿的客戶2010-09-18
- 平面設計師：一個涂有虛名的職業(yè)2010-09-18
- 站在十字路口的網(wǎng)站設計師2010-09-18
- 設計師請別把自己不當人。2010-09-18
- 什么樣的包裝才叫做有新意的包裝呢？2010-09-18
- 尋隱活動尋找網(wǎng)頁設計開發(fā)高手2010-09-18
- 求平面設計同行們的經驗指引2010-09-18
結構寫好了，接下來寫CSS樣式部分了，在這里先重點介紹一個CSS屬性：
text-overflow: ellipsis;
text-overflow就是定義文字溢出的時候，該如何截斷文字，屬性值是ellipsis的時候就是當對象內文本溢出的時候顯示省略標記(…)，該屬性支持IE6以上的版本IE7/8/9和除Firefox以外的現(xiàn)代標準瀏覽器：Chrome、Safari。Opera是個特例，但也有一個專門針對Opera的屬性：
-o-text-overflow: ellipsis;
好了，下面就是完整的CSS代碼
view sourceprint?
