如何在select2上隐藏溢出？

Question

如何在select2上隐藏溢出？

use*_*757 6 html css jquery jquery-select2

我正在使用优秀的select2 jquery控件.
我试图使用CSS div布局模仿3单元格表格显示布局.
当selected大于当前select2宽度时,控件通常会用椭圆隐藏溢出.使用我的布局,select2控件显示整个文本并吹出"table"div的边界.我希望它能隐藏溢出 - 有什么办法可以做到这一点吗？而且我并不反对完全覆盖显示:表格设计(除非是实际的表格).

我这样做:

在此输入图像描述

我希望它能做到这一点:

在此输入图像描述

我希望它填补可用空间而不再需要.注意 - 我有一个500px容器来复制问题,但实际上这将是一个percenatge容器,并且在窗口调整大小时会出现问题.

    <link href="http://ivaynberg.github.io/select2/select2-3.3.2/select2.css" rel="stylesheet"/>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="http://ivaynberg.github.io/select2/select2-3.3.2/select2.js"></script>


    <style> 
        .container { width: 500px; margin: 0 auto; border: 5px solid black; }

        .table  {
            display:table;
            width: 100%;
        }
        .table-row {
            display: table-row;
            width: 100%;
        }
        .left, .right {
            display:table-cell;
            width: 100px;
            background-color: green;
        }
        .mid {
            display:table-cell;
            width: 100%;
            background-color: red;
        }
        .mid > *  {
            width: 100%;
        }  
    </style>


</head>
<body>


        <div class="container">
            <div class="table">
                <div class="row">
                    <span class="left">AAAA</span>
                    <span class="mid">

                        <input type="hidden" id="e5" />

                    </span>
                    <span class="right">ZZZZ</span>
                </div>
            </div>
        </div>


        <script>

            $("#e5").select2({
                minimumInputLength: 0,
                query: function (query) {
                    var data = { results: [] };
                    data.results.push({ id: 1, text: 'abcdefg' });
                    data.results.push({ id: 2, text: 'abcdefghijklmn' });
                    data.results.push({ id: 3, text: 'abcdefghijklmnopqrstuv' });
                    data.results.push({ id: 4, text: 'abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz' });

                    query.callback(data);
                }
            });

        </script>


</body>
</html>

Run Code Online (Sandbox Code Playgroud)

JSFIDDLE:http://jsfiddle.net/264FU/

Answer 1

Mar*_*jak 9

只是尝试添加

table-layout: fixed;

Run Code Online (Sandbox Code Playgroud)

对你的table对象.除非你真的不想将绿色跨度设置为100px.

这是一个jsfiddle的例子

编辑:如果你想一边"绿色"的跨越,以调整/调整的内容,你可以欺骗一个小(我们可以,因为我们面对的不是一个真正的HTML表格),并设置.mid到display:table固定布局(与设置绿色的宽度到更小的东西 - 因为它用作最小宽度).它会像魅力一样工作=)

jsfiddle这个解决方案

归档时间：	12 年，8 月前
查看次数：	2975 次
最近记录：	12 年，8 月前