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

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

查看全文

相关阅读:
从键盘输入一串数据，以“exit"结束输入，且输出数据。
判断指定盘符下文件夹是否存在
 java 输出图形
 Object对象类
 java继承
 Java封装
 java环境搭建系列：JDK环境变量详细配置
 java环境搭建系列：JDK从下载安装到简单使用
 ORACLE常见错误代码的分析与解决
 Java与C++面向对象不同点

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