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

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

查看全文

相关阅读:
找回感觉的练习
 第四次博客作业-结对项目
 zookeeper启动脚本
 docker自己制作centos7-jdk1.8-tomcat8
Docker运行springboot的项目
 从list中模糊查询字符串
 Java实现文件下载
 hadoop的HA集群搭建
 oauth2 feign 报401的错误
 SpringBoot mybatis 自定义分页插件注解版

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