JS动态控制列表宽度

      列表宽度常用的有两种方法，一是用程序截取字符串，二是用CSS把超过长度部分隐藏，这两种方法各有缺陷，第一种是依赖字体格式，当换字体或字号要修改程序，第二种是有时把想保留的内容隐藏了，那么有没有更好的方法呢，当然有啦！

      直接上代码吧:

< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < title ></ title >
     < style  type ="text/css" >
        .example1
         {
            border : 1px solid #800000 ;
            float : left ;
            padding : 10px ;
         }
        .example2
         {
            border : 1px solid #800000 ;
            float : left ;
            padding : 10px ;
            margin-top : 10px ;
         }
        .all
         {
            font-size : 14px ;
            width : 330px ;
         }
        .one
         {
            float : left ;
            overflow : hidden ;
            height : 25px ;
            color : Gray ;
         }
        .two
         {
            float : left ;
            color : Green ;
         }
     </ style >
     < script  src ="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"  type ="text/javascript" ></ script >
     < script  type ="text/javascript" >
        $( function  () {
             var  sumlen  =   320 ;
            $.each($( " .all " ),  function  (index, item) {
                 if  (($( " .one:eq( "   +  index  +   " ) " ).width()  +  $( " .two:eq( "   +  index  +   " ) " ).width())  >  sumlen) {
                     var  length  =  sumlen  -  $( " .two:eq( "   +  index  +   " ) " ).width();
                    $( " .one:eq( "   +  index  +   " ) " ).css( " width " , length  +   " px " );
                }
            });
        });
     </ script >
</ head >
< body >
    Demo 1: < br  />
     < div  class ="example1" >
         < div  class ="all" >
             < div  class ="one" > 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试 </ div >
             < div  class ="two" > &nbsp; (4/29 12:00:00) </ div >
         </ div >
         < div  class ="all" >
             < div  class ="one" > 测试测试测试试测试测试测试测测试 </ div >
             < div  class ="two" > &nbsp; (4/29 12:00:00) </ div >
         </ div >
         < div  class ="all" >
             < div  class ="one" > 测试测试测试测试测试测试测试测试测试测 </ div >
             < div  class ="two" > &nbsp; (4/29 12:00:00) </ div >
         </ div >
         < div  class ="all" >
             < div  class ="one" > 测试测试测试测试测测试 </ div >
             < div  class ="two" > &nbsp; (4/29 12:00:00) </ div >
         </ div >
         < div  class ="all" >
             < div  class ="one" > 测试测试测试测试测测测试测试测试测测测试测试测试测测测试测试测试测测试 </ div >
             < div  class ="two" > &nbsp; (4/29 12:00:00) </ div >
         </ div >
     </ div >
     < div  style ="clear:both" ></ div >
     < br  />
    Demo 2(去掉时间列): < br  />
     < div  class ="example2" >
         < div  class ="all" >
             < div  class ="one" > 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试 </ div >
             < div  class ="two" ></ div >
         </ div >
         < div  class ="all" >
             < div  class ="one" > 测试测试测试试测试测试测试测测试 </ div >
             < div  class ="two" ></ div >
         </ div >
         < div  class ="all" >
             < div  class ="one" > 测试测试测试测试测试测试测试测试测试测 </ div >
             < div  class ="two" ></ div >
         </ div >
         < div  class ="all" >
             < div  class ="one" > 测试测试测试测试测测试 </ div >
             < div  class ="two" ></ div >
         </ div >
         < div  class ="all" >
             < div  class ="one" > 测试测试测试测试测测测试测试测试测测测试测试测试测测测试测试测试测测试 </ div >
             < div  class ="two" ></ div >
         </ div >
     </ div >
</ body >

</ html >

 

 

效果图：