用CSS就(jiù)能完(wán)美(měi)解(jiě)決(jué)文字溢(yì)出(chū)的處理辦法
經(jīng)常會在(zài)項(xiàng)目中(zhōng)碰到(dào)文(wén)字(zì)溢出(chū)的(dí)情況(kuàng)，解(jiě)決起來也比較(jiào)麻(má)煩(fán)，而(ér)最大(dà)的(dí)麻煩(fán)還(huán)是(shì)在(zài)瀏(liú)覽(lǎn)器的(dí)兼容問(wèn)題上(shàng)。至少(shǎo)到(dào)目前(qián)為止，我還沒找到用CSS就能(néng)完(wán)美解決(jué)文字溢(yì)出的辦(bàn)法(fǎ)。前(qián)幾天(tiān)就再次(cì)碰到(dào)這(zhè)個(gè)問題，之後(hòu)一查，發現和(hé)迅(xùn)雷(léi)的一(yī)個頁(yè)麵重(zhòng)構(gòu)的麵試(shì)題驚奇的(dí)相似，仔細一想(xiǎng)，也沒啥(shá)巧(qiǎo)合不巧合(hé)的(dí)，隻能說這(zhè)種情況太常見(jiàn)了。
要求是(shì)這(zhè)樣的：一個新聞(wén)列表，新(xīn)聞標(biāo)題後(hòu)緊跟(gēn)著日期，新聞標題的(dí)寬(kuān)度超(chāo)過(guò)一定的(dí)寬度(dù)就要(yào)自(zì)動截(jié)斷(duàn)，但(dàn)是(shì)日期必(bì)須顯示完整(zhěng)。
花了點(diǎn)時間(jiān)研究了(liǎo)下，最(zuì)終的效果對(duì)於(yú)瀏(liú)覽器的兼容不(bù)是(shì)很(hěn)理(lǐ)想(xiǎng)，但(dàn)我(wǒ)覺(jué)得也是很不錯了。
查看(kàn)演示
看(kàn)到這個要(yào)求，基(jī)本(běn)上就知道HTML的結構該(gāi)怎(zěn)麼寫(xiě)了，一個有序(xù)列表(biǎo)(ol+li)：
<ol id="news-list">
<li><a href="#">毛毛貓係(xì)列漫(màn)畫(huà)</a><span>2010-09-18</span></li>
<li><a href="#">一個網頁設(shè)計需求(qiú)方眼(yǎn)中的網頁設計</a><span>2010-09-18</span></li>
<li><a href="#">如何(hé)應(yīng)對(duì)騙(piàn)稿的(dí)客戶</a><span>2010-09-18</span></li>
<li><a href="#">平麵(miàn)設計(jì)師：一個塗有(yǒu)虛(xū)名(míng)的(dí)職業</a><span>2010-09-18</span></li>
<li><a href="#">站(zhàn)在十字(zì)路(lù)口(kǒu)的(dí)網站(zhàn)設計(jì)師</a><span>2010-09-18</span></li>
<li><a href="#">設計師請別(bié)把自己(jǐ)不當人。</a><span>2010-09-18</span></li>
<li><a href="#">什麼(mó)樣的包(bāo)裝(zhuāng)才叫做有新(xīn)意(yì)的(dí)包裝(zhuāng)呢？</a><span>2010-09-18</span></li>
<li><a href="#">尋隱活動尋(xún)找網(wǎng)頁(yè)設計(jì)開(kāi)發(fā)高手</a><span>2010-09-18</span></li>
<li><a href="#">求(qiú)平(píng)麵(miàn)設(shè)計同行們的(dí)經驗(yàn)指引</a><span>2010-09-18</span></li>
</ol>
結構寫(xiě)好了，接下來(lái)寫CSS樣式(shì)部(bù)分(fēn)了(liǎo)，在(zài)這裏先重點介(jiè)紹一(yī)個CSS屬性：
text-overflow: ellipsis;
text-overflow就(jiù)是定(dìng)義文(wén)字溢(yì)出的時(shí)候，該如何(hé)截斷(duàn)文(wén)字，屬(shǔ)性值是ellipsis的時(shí)候就是(shì)當對(duì)象內(nèi)文本溢出的時候(hòu)顯示(shì)省略(lüè)標記(…)，該屬性支(zhī)持(chí)IE6以上(shàng)的(dí)版本IE7/8/9和除(chú)Firefox以外(wài)的現(xiàn)代標準瀏覽器(qì)：Chrome，Safari。Opera是(shì)個特例(lì)，但也有一(yī)個(gè)專門針對(duì)Opera的(dí)屬(shǔ)性(xìng)：
-o-text-overflow: ellipsis;
好(hǎo)了(liǎo)，下(xià)麵(miàn)就是(shì)完整的(dí)CSS代(dài)碼(mǎ)
view sourceprint?
<style type="text/css">
#news-list {
list-style:none;
width:156px; /*注意(yì)這個(gè)寬(kuān)度(dù)*/
}
#news-list:after {
content:'';
display:block;
clear:both;
height:0px;
}
#news-list li {
clear:both; /*清除li中(zhōng)的浮動(dòng)*/
}
#news-list li a {
float:left; /*標(biāo)題向(xiàng)左浮(fú)動(dòng)*/
color:#333;
text-decoration:none;
font-size:13px;
max-width:156px; /*給標準瀏(liú)覽器一個(gè)最大寬度(dù)*/
height:24px;
white-space:nowrap !important; /*強製文(wén)字不換行(háng)(標準瀏覽(lǎn)器(qì))*/
white-space:normal; /*溢(yì)出的時(shí)候文字(zì)換行，並(bìng)配合上(shàng)麵的固定高(gāo)度(dù)，對(duì)文字進(jìn)行(háng)裁切*/
overflow:hidden;
text-overflow:ellipsis; /*截斷文(wén)字(zì)，顯(xiǎn)示(shì)省略(lüè)號(...)*/
-o-text-overflow:ellipsis; /*Opera的(dí)專(zhuān)用(yòng)截(jié)斷(duàn)文(wén)字(zì)的屬性(xìng)*/
background:none; /*解(jiě)決(jué)IE6的(dí)莫名(míng)高度BUG，試試在IE6下去掉這個(gè)屬性(xìng)*/
}
#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)題和(hé)日(rì)期(qī)顯示在同一行*/
_position:relative; /*針(zhēn)對IE6使(shǐ)用相對(duì)定位(wèi)*/
}
</style>
轉(zhuǎn)載(zǎi)請保(bǎo)留(liú)原(yuán)文(wén)地(dì)址(zhǐ): https://antelcom.cn/show-469.html