用CSS就能完美解決文字溢出的處理辦法

　　經(jīng)常會在項(xiàng)目中碰到文字溢出的情況，解決起來也比較麻煩，而最大的麻煩還是在瀏覽器的兼容問題上。至少到目前為止，我還沒找到用CSS就能完美解決文字溢出的辦法。前幾天就再次碰到這個(gè)問題，之后一查，發(fā)現(xiàn)和迅雷的一個(gè)頁面重構(gòu)的面試題驚奇的相似，仔細(xì)一想，也沒啥巧合不巧合的，只能說這種情況太常見了。

　　要求是這樣的：一個(gè)新聞列表，新聞標(biāo)題后緊跟著日期，新聞標(biāo)題的寬度超過一定的寬度就要自動截?cái)?，但是日期必須顯示完整。

　　花了點(diǎn)時(shí)間研究了下，最終的效果對于瀏覽器的兼容不是很理想，但我覺得也是很不錯(cuò)了。

　　查看演示

　　看到這個(gè)要求，基本上就知道HTML的結(jié)構(gòu)該怎么寫了，一個(gè)有序列表(ol+li)：

　　<ol id="news-list">

　　<li><a href="#">毛毛貓系列漫畫</a><span>2010-09-18</span></li>

　　<li><a href="#">一個(gè)網(wǎng)頁設(shè)計(jì)需求方眼中的網(wǎng)頁設(shè)計(jì)</a><span>2010-09-18</span></li>

　　<li><a href="#">如何應(yīng)對騙稿的客戶</a><span>2010-09-18</span></li>

　　<li><a href="#">平面設(shè)計(jì)師：一個(gè)涂有虛名的職業(yè)</a><span>2010-09-18</span></li>

　　<li><a href="#">站在十字路口的網(wǎng)站設(shè)計(jì)師</a><span>2010-09-18</span></li>

　　<li><a href="#">設(shè)計(jì)師請別把自己不當(dāng)人。</a><span>2010-09-18</span></li>

　　<li><a href="#">什么樣的包裝才叫做有新意的包裝呢？</a><span>2010-09-18</span></li>

　　<li><a href="#">尋隱活動尋找網(wǎng)頁設(shè)計(jì)開發(fā)高手</a><span>2010-09-18</span></li>

　　<li><a href="#">求平面設(shè)計(jì)同行們的經(jīng)驗(yàn)指引</a><span>2010-09-18</span></li>

　　</ol>

　　結(jié)構(gòu)寫好了，接下來寫CSS樣式部分了，在這里先重點(diǎn)介紹一個(gè)CSS屬性：

　　text-overflow: ellipsis;

　　text-overflow就是定義文字溢出的時(shí)候，該如何截?cái)辔淖郑瑢傩灾凳莈llipsis的時(shí)候就是當(dāng)對象內(nèi)文本溢出的時(shí)候顯示省略標(biāo)記(…)，該屬性支持IE6以上的版本IE7/8/9和除Firefox以外的現(xiàn)代標(biāo)準(zhǔn)瀏覽器：Chrome、Safari。Opera是個(gè)特例，但也有一個(gè)專門針對Opera的屬性：

　　-o-text-overflow: ellipsis;

　　好了，下面就是完整的CSS代碼

　　view sourceprint?

　　<style type="text/css">

　　#news-list {

　　list-style:none;

　　width:156px; /*注意這個(gè)寬度*/

　　}

　　#news-list:after {

　　content:'';

　　display:block;

　　clear:both;

　　height:0px;

　　}

　　#news-list li {

　　clear:both; /*清除li中的浮動*/

　　}

　　#news-list li a {

　　float:left; /*標(biāo)題向左浮動*/

　　color:#333;

　　text-decoration:none;

　　font-size:13px;

　　max-width:156px; /*給標(biāo)準(zhǔn)瀏覽器一個(gè)最大寬度*/

　　height:24px;

　　white-space:nowrap !important; /*強(qiáng)制文字不換行(標(biāo)準(zhǔn)瀏覽器)*/

　　white-space:normal; /*溢出的時(shí)候文字換行，并配合上面的固定高度，對文字進(jìn)行裁切*/

　　overflow:hidden;

　　text-overflow:ellipsis; /*截?cái)辔淖郑@示省略號(...)*/

　　-o-text-overflow:ellipsis; /*Opera的專用截?cái)辔淖值膶傩?/

　　background:none; /*解決IE6的莫名高度BUG，試試在IE6下去掉這個(gè)屬性*/

　　}

　　#news-list li a:hover {

　　color:#000;

　　text-decoration:underline;

　　}

　　#news-list li span {

　　float:left; /*日期向左浮動*/

　　color:#666;

　　padding-left:10px;

　　margin-right:-99px; /*讓標(biāo)題和日期顯示在同一行*/

　　_position:relative; /*針對IE6使用相對定位*/

　　}

　　</style>