用css來實現標題內容超出長度範圍自動省略,且有滑鼠提示

很多時候，我們希望一些文字(比如網站首頁新聞塊的標題),在一行內顯示，並且超出它的長度範圍時，則加...省略，並且出現提示。
 
解決辦法： 先看樣本，,其中表格內左右兩塊內容完全相同。超出長度的自動省略了，並有提示。注意第二行，在左邊，由於容器寬度不夠，它是省略有提示的，在右邊，由於寬度夠，則它是普通模式。你還可以調整IE的“查看 》文字大小”，調成不同的字大小看一看，重新整理後再調幾下。 這裡是相關範例程式碼，你可以修改後運行：
<style>
#leftnewstd .ellipsis_row{width:170px}
#rightnewstd .ellipsis_row{width:250px}
.ellipsis_row{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
wzy:expression(        this.title=this.offsetWidth<this.children(0).offsetWidth?this.children(0).innerText:'',
     this.style.wzy=''
 );
background-color=#b0b0b0;
}
</style>
<table  ><tr>
<td id=leftnewstd width=200px bgcolor=#f0f0ff >
<span class=ellipsis_row><span>多以開源起家 美國電腦專業前20名著名學校點評</span></span><br>
<span class=ellipsis_row ><span>挑戰微軟資料庫管理案例</span></span><br>
<span class=ellipsis_row ><span>WWW：15年誰主沉浮？</span></span>
</td>
<td id=rightnewstd width=280px bgcolor=#f0fff0>
<span class=ellipsis_row ><span>多以開源起家 美國電腦專業前20名著名學校點評</span></span><br>
<span class=ellipsis_row ><span>挑戰微軟資料庫管理案例</span></span><br>
<span class=ellipsis_row ><span>WWW：15年誰主沉浮？</span></span>
</tr></table>
 

解釋：樣式中的overflow,text-overflow,和white-space,三者來結合實現省略功能。css運算式 expression來實現，加提示。用this.offsetWidth<this.children(0).offsetWidth來判斷是內容是否超過容器寬度。是的話，加title提示.應用完運算式之後，用this.style.wzy=''來清空它，以免影響頁面效率。