用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=''来清空它，以免影响页面效率。