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

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

要求是這樣的：一個(gè)新聞列表，新聞標題后緊跟著(zhù)日期，新聞標題的寬度超過(guò)一定的寬度就要自動(dòng)截斷，但是日期必須顯示完整。

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

查看演示

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

<ol id="news-list">

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

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

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

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

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

<li><a href="#">設計師請別把自己不當人。</a><span>2010-09-18</span></li>

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

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

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

</ol>

結構寫(xiě)好了，接下來(lái)寫(xiě)CSS樣式部分了，在這里先重點(diǎn)介紹一個(gè)CSS屬性：

text-overflow: ellipsis;

text-overflow就是定義文字溢出的時(shí)候，該如何截斷文字，屬性值是ellipsis的時(shí)候就是當對象內文本溢出的時(shí)候顯示省略標記(…)，該屬性支持IE6以上的版本IE7/8/9和除Firefox以外的現代標準瀏覽器：Chrome、Safari。Opera是個(gè)特例，但也有一個(gè)專(zhuān)門(mén)針對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中的浮動(dòng)*/

}

#news-list li a {

float:left; /*標題向左浮動(dòng)*/

color:#333;

text-decoration:none;

font-size:13px;

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

height:24px;

white-space:nowrap !important; /*強制文字不換行(標準瀏覽器)*/

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

overflow:hidden;

text-overflow:ellipsis; /*截斷文字，顯示省略號(...)*/

-o-text-overflow:ellipsis; /*Opera的專(zhuān)用截斷文字的屬性*/

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

}

#news-list li a:hover {

color:#000;

text-decoration:underline;

}

#news-list li span {

float:left; /*日期向左浮動(dòng)*/

color:#666;

padding-left:10px;

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

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

}

</style>