[技术探讨]用css来实现标题内容超出长度范围自动省略,且有鼠标提示

[wzhiyuan]

http://wzhiyuan.net/mydoc/ellipsis.htm
很多时候，我们希望一些文字(比如网站首页新闻块的标题),在一行内显示，并且超出它的长度范围时，则加...省略，并且出现提示。
我们通常的解决方法是在服务器端判断内容的长度，超出多少个字符则截断，并添加title提示。asp代码类似如下：
<%
if len(mystr)>20 then
response.write "<span title='" & mystr &"'>" & left(mystr,17) & "...</span>"
else
response.write "<span>" & mystr & "</span>"
end if
%>
这样的方法有几个缺点：

1,消耗服务器资源。
2,通用性差.一旦你的显示宽度变化了，你就需要重新调整要显示的字符个数。
3,更重要的是,常常对不齐。一是字符种类(汉字,大小写字母，全半角标点)不同，则宽度不同。二是字号大小不同，宽度也不同，最大号字和最小号字的宽度差了很多。
因此，这种方法显得不够理想，我们有必要另想办法。
解决办法： 先看示例，,其中表格内左右两块内容完全相同。超出长度的自动省略了，并有提示。注意第二行，在左边，由于容器宽度不够，它是省略有提示的，在右边，由于宽度够，则它是普通模式。你还可以调整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=''来清空它，以免影响页面效率。

[wzhiyuan]

晕.又换了台机器,发现又不行了.
难到刚才看错了?

原谅我的轻率.我有空再试试.

[softhot]

用js好了 css总让人觉得不可靠！

[boydream]

关注~~~@_@~

[computerboy1980]

关注

[phantomsea]

板凳

[2003bbs]

看看

[elevenkey]

做个记号

[zbking]

我也做记号

[liuph3000]

mark

[Tirecoed]

Mark

[邦迪代驾]

学习...

[李睿_Lee]

什么时候大家都支持CSS标准就好了。

[yumin_hu]

路过

[soarheaven]

js怎么实现？初学，不要笑话 :)

[fosjos]

mark

[tech0432]

顶

[silentwins]

mark的时间到了

[shanxing]

顶

[wolf_hero]

学习学习

[chenanlin1981]

mark and up