长字符串显示引起的问题通用性解决方法

今天测试员小黄提交一个WeB界面bug，布局改变了。 在FF中调试发现是长字符串变量${name}撑破的div。
编写时，发现的${name}值大多都很小，所以也就没有加以防范措施。这个隐患今天终于爆发了。
解决办法：
1，后台字符串截取。（程序员都知道）
2，input 标签解决，这种方法有个缺点是：在有背景的情况下，初次显示没有问题，但当鼠标访问后留下白斑，很难看！
<input type="text" size=18 readonly style="BACKGROUND-COLOR: transparent;BORDER: medium none;cursor:hand;" value="${name}">
3，js解决。 利用jquery框架提供的功能很容易解决。类似于后台字符串截取。缺点是如果内容是
url 或者是email，会破坏内容结构。
4，div + span 我今天新发现的，个人推荐。
<div style="overflow:hidden;width:200px" title="${name}"><span> ${name} </span></div>

单纯用div，在调节css的width:200px;overflow:hidden;word-wrap :break-word;word-break:normal; 对一个长字符是不起作用的。

考虑到项目中有很多这样的隐患，每个都改，工作量比较大，于是写了一js来解决
/*auto hidden while text content length is over long*/
$(".longTitle").each(function(){
$(this).wrap("<div title='" + this.innerHTML.trim() + "' class='longTitle'></div>");
});
这样在需要的标签上加上一个longTitle 的class即可。<注：被加的标签可以是<a><span> 如果文本直接放在<td>下，请换wrapInner（）函数。具体参考jquery框架 >

这是google的gmail的解决方法。代码干净。通用性强。测试ie6，7 ，ff2，3 均正常。没有效率问题！