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

今天测试员小黄提交一个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 均正常。没有效率问题！

   

     

   

<iframe style="position: absolute; display: block; opacity: 0.7; z-index: 500; width: 17px; height: 21px; top: 324px; right: 469px;" src="http://www.google.com/notebook/static_files/blank.html" id="gnotes-notemagic" frameborder="0"></iframe>