純CSS的方法解決文字溢出與截斷的問題

在網站的首頁或者側邊欄輸出新聞條目的時候，經常會遇到文字溢出與截斷的問題。這個問題曾經困擾了我很久，最近又重新遇到，我本著“每天進步一點點”的態度，繼續改進方法，查閱文章，幾經測試，終於確定使用純CSS的方法解決這個問題。關於這個問題，我用編程的方式解決過，也用js攻克過，現在CSS的標準屬性和各瀏覽器私人屬性的發展給我們帶來重新解決這一問題的機會，我這樣做也算是一種新的嘗試吧。

假定我要實現一組新聞條目的輸出，每個新聞標題後面附帶有新聞發表的日期，日期要完整顯示，但標題和日期的總長度超過一定數值就要截斷標題。

先看看示範吧：http://www.threesnow.com/code/089/

看完示範，重點介紹一下CSS代碼中用到的一個關鍵屬性：text-overflow 。

text-overflow: ellipsis;

這個屬性定義了當文字溢出的時候如何截斷文字，屬性值為 ellipsis 的時候就是當對象內文本溢出的時候顯示省略標記(…)，該屬性支援IE6以上的版本IE7/8/9和除Firefox以外的現代標準瀏覽器：Chrome、Safari。對於Opera，有一個相應的私人屬性：

-o-text-overflow: ellipsis;

新聞條目的結構，我是這樣寫的：

<ul id="news">    <li><a href="#">溢出的</a><span>2012-05-30</span></li>    <li><a href="#">溢出的時候</a><span>2012-05-31</span></li>    <li><a href="#">溢出的時候文字</a><span>2012-06-01</span></li>    <li><a href="#">溢出的時候文字換行</a><span>2012-06-02</span></li>    <li><a href="#">溢出的時候文字換行並配</a><span>2012-06-03</span></li>    <li><a href="#">溢出的時候文字換行並配合上</a><span>2012-06-04</span></li>    <li><a href="#">溢出的時候文字換行並配合上面的</a><span>2012-06-05</span></li>    <li><a href="#">溢出的時候文字換行並配合上面的固定</a><span>2012-06-06</span></li>    <li><a href="#">溢出的時候文字換行並配合上面的固定高度</a><span>2012-06-07</span></li></ul>

下面是完整的CSS代碼：

* {    margin:0;    padding:0;}#news {    margin-top:100px;    margin-left:100px;    list-style:none;    width:156px;  /*這個寬度可以深究一下，它是不包含日期長度的*/}#news:after {    content:'';    display:block;    clear:both;    height:0px;}#news li {    clear:both;  /*清除li中的浮動*/}#news li a {    float:left;  /*標題向左浮動*/    color:#333;    text-decoration:none;    font-size:13px;    max-width:156px;  /*給標準瀏覽器一個最大寬度*/    height:24px;    white-space:nowrap !important;  /*強制文字不換行(標準瀏覽器)*/    white-space:normal;  /*溢出的時候文字換行，並配合上面的固定高度，對文字進行裁切*/    overflow:hidden;    text-overflow:ellipsis;  /*截斷文字，顯示省略符號(...)*/    -o-text-overflow:ellipsis;  /*Opera的專用截斷文字的屬性*/    background:none;  /*解決IE6的莫名高度BUG，試試在IE6下去掉這個屬性*/}#news li a:hover {    color:#000;    text-decoration:underline;}#news li span {    float:left;      color:#666;    padding-left:10px;    margin-right:-99px;     _position:relative; }

我所說的以純CSS的方法解決文字溢出與截斷的問題基本上就是這樣。

不過，這個方法有個不得不正視的問題，那就是對firefox的相容性，如果哪位大俠有好的辦法，請留言指教。