JS动态控制列表宽度

zoukankan html css js c++ java

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"> (4/29 12:00:00)</div>
        </div>
        <div class="all">
            <div class="one">测试测试测试试测试测试测试测测试</div>
            <div class="two"> (4/29 12:00:00)</div>
        </div>
        <div class="all">
            <div class="one">测试测试测试测试测试测试测试测试测试测</div>
            <div class="two"> (4/29 12:00:00)</div>
        </div>
        <div class="all">
            <div class="one">测试测试测试测试测测试</div>
            <div class="two"> (4/29 12:00:00)</div>
        </div>
        <div class="all">
            <div class="one">测试测试测试测试测测测试测试测试测测测试测试测试测测测试测试测试测测试</div>
            <div class="two"> (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>

效果图：

作者：Artwl

出处：http://artwl.cnblogs.com

本文首发博客园，版权归作者跟博客园共有。转载必须保留本段声明，并在页面显著位置给出本文链接，否则保留追究法律责任的权利。

查看全文

相关阅读:
jmeter测试接口--form表单提交请求（解决请求传参为空的问题）
jmeter测试接口-打开很多TCP的连接数TIME_WAIT状态（Linux环境）导致报错的解决方法
 Jmeter 事务下的if控制器和无事务下的if控制器是否有不同（业务实现3:2的补充）
Jmeter if控制器的使用
 Jmeter 文件格式的参数化
 CentOS7学习笔记--tomcat9环境安装
 CentOS7学习笔记--PHP环境安装
 CentOS学习笔记—启动、ROOT密码
 虚拟机硬盘扩容
 win7如何设置某个软件不弹出用户账户控制

原文地址：https://www.cnblogs.com/artwl/p/2032986.html