在網(wǎng)站的首頁(yè)或者邊欄輸出新聞條目的時(shí)候，經(jīng)常會(huì)遇到文字溢出與截?cái)嗟膯?wèn)題。這個(gè)問(wèn)題曾經(jīng)困擾了我很久，最近又重新遇到，我本著“每天進(jìn)步一點(diǎn)點(diǎn)”的態(tài)度，繼續(xù)改進(jìn)方法，查閱文章，幾經(jīng)測(cè)試，終于確定使用純CSS的方法解決這個(gè)問(wèn)題。關(guān)于這個(gè)問(wèn)題，我用編程的方式解決過(guò)，也用js攻克過(guò)，現(xiàn)在CSS的標(biāo)準(zhǔn)屬性和各瀏覽器私有屬性的發(fā)展給我們帶來(lái)重新解決這一問(wèn)題的機(jī)會(huì)，我這樣做也算是一種新的嘗試吧。
假定我要實(shí)現(xiàn)一組新聞條目的輸出，每個(gè)新聞標(biāo)題后面附帶有新聞發(fā)表的日期，日期要完整顯示，但標(biāo)題和日期的總長(zhǎng)度超過(guò)一定數(shù)值就要截?cái)鄻?biāo)題。
看完演示，重點(diǎn)介紹一下CSS代碼中用到的一個(gè)關(guān)鍵屬性：text-overflow 。
text-overflow: ellipsis;
這個(gè)屬性定義了當(dāng)文字溢出的時(shí)候如何截?cái)辔淖�，屬性值�?ellipsis 的時(shí)候就是當(dāng)對(duì)象內(nèi)文本溢出的時(shí)候顯示省略標(biāo)記(…)，該屬性支持IE6以上的版本IE7/8/9和除Firefox以外的現(xiàn)代標(biāo)準(zhǔn)瀏覽器：Chrome、Safari。對(duì)于Opera，有一個(gè)相應(yīng)的私有屬性：
-o-text-overflow: ellipsis;
新聞條目的結(jié)構(gòu)，我是這樣寫的：
<ul id="news">
<li><a href="#">溢出的</a><span>2012-05-30</span></li>
<li><a href="#">溢出的時(shí)候</a><span>2012-05-31</span></li>
<li><a href="#">溢出的時(shí)候文字</a><span>2012-06-01</span></li>
<li><a href="#">溢出的時(shí)候文字換行</a><span>2012-06-02</span></li>
<li><a href="#">溢出的時(shí)候文字換行并配</a><span>2012-06-03</span></li>
<li><a href="#">溢出的時(shí)候文字換行并配合上</a><span>2012-06-04</span></li>
<li><a href="#">溢出的時(shí)候文字換行并配合上面的</a><span>2012-06-05</span></li>
<li><a href="#">溢出的時(shí)候文字換行并配合上面的固定</a><span>2012-06-06</span></li>
<li><a href="#">溢出的時(shí)候文字換行并配合上面的固定高度</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; /*這個(gè)寬度可以深究一下，它是不包含日期長(zhǎng)度的*/
}
#news:after {
content:'';
display:block;
clear:both;
height:0px;
}
#news li {
clear:both; /*清除li中的浮動(dòng)*/
}
#news li a {
float:left; /*標(biāo)題向左浮動(dòng)*/
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í)候文字換行，并配合上面的固定高度，對(duì)文字進(jìn)行裁切*/
overflow:hidden;
text-overflow:ellipsis; /*截?cái)辔淖�，顯示省略號(hào)(...)*/
-o-text-overflow:ellipsis; /*Opera的專用截?cái)辔淖值膶傩?/
background:none; /*解決IE6的莫名高度BUG，試試在IE6下去掉這個(gè)屬性*/
}
#news li a:hover {
color:#000;
text-decoration:underline;
}
#news li span {
float:left;
color:#666;
padding-left:10px;
margin-right:-99px;
_position:relative;
}我所說(shuō)的以純CSS的方法解決文字溢出與截?cái)嗟膯?wèn)題基本上就是這樣。
不過(guò)，這個(gè)方法有個(gè)不得不正視的問(wèn)題，那就是對(duì)firefox的兼容性，如果哪位大俠有好的辦法，請(qǐng)留言指教。
喜歡 
頂
難過(guò)
囧
圍觀
無(wú)聊
