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>

效果图： 

 

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/artwl/p/2032986.html