我正在使用优秀的
select2 jquery控件.
我试图使用CSS div布局模仿3单元格表格显示布局.
当selected大于当前select2宽度时,控件通常会用椭圆隐藏溢出.使用我的布局,select2控件显示整个文本并吹出“table”div的边界.我希望它能隐藏溢出 – 有什么办法可以做到这一点吗？而且我并不反对完全覆盖显示：表格设计(除非是实际的表格).
我试图使用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>
JSfiddle：http://jsfiddle.net/264FU/
解决方法
只是尝试添加
table-layout: fixed;
到你的表对象.除非你真的不想将绿色跨度设置为100px.
这是一个jsfiddle example
编辑：如果你想侧面“绿色”跨度调整大小/调整内容,你可以作弊(我们可以,因为我们没有处理真正的HTML表格),并设置.mid显示：表格与固定布局(并将绿色宽度设置为较小的值 – 因为它用作最小宽度).它会像魅力一样工作=)
jsfiddle for this solution