很多时候，我们希望一些文字(比如网站首页新闻块的标题),在一行内显示，并且超出它的长度范围时，则加...省略，并且出现提示。

 

解决办法： 先看示例，,其中表格内左右两块内容完全相同。超出长度的自动省略了，并有提示。注意第二行，在左边，由于容器宽度不够，它是省略有提示的，在右边，由于宽度够，则它是普通模式。你还可以调整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=''来清空它，以免影响页面效率。