Question

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

我这样做：

enter image description here

我希望它能做到这一点：

enter image description here

我希望它能够填补可用空间而不再需要。注意 - 我有一个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>

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

Answer 1

尝试添加

table-layout: fixed;

到您的table对象。除非你真的不想将绿色范围设置为100px。

这是一个jsfiddle example

编辑：如果您希望侧面“绿色”跨度调整大小/调整内容，您可以作弊（我们可以，因为我们没有处理真正的html表格），以及使用固定布局将.mid设置为display:table（并将绿色宽度设置为更小的值 - 因为它用作最小宽度）。它会像魅力一样工作=）

jsfiddle for this solution

如何在select2上隐藏溢出？

1 个答案: