分类导航

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了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>