如何隐藏select2上溢出？ [英] How to hide overflow on select2?
问题描述
我使用了出色的
只需尝试添加
table-layout：fixed;
到您的表对象。除非你真的不想将绿色跨度设置为100px。
这里是一个 jsfiddle example
编辑：如果您希望侧边绿色跨度调整/调整内容，可以欺骗一点（我们可以，因为我们不处理一个真正的html表），并设置 .mid 到 display：table 具有固定的布局（并且将绿色宽度设置为更小的值 - 因为它用作最小宽度）。它将像charm =）
I am using the excellent select2 jquery control.
I am trying to mimic a 3 cell table display layout, using CSS div layout.
When the selected is larger than the current select2 width, the control normally hides the overflow with an ellipses. With my layout, the select2 control shows the entire text and blows out of the bounds of the "table" div. I would like it to hide the overflow instead - is there any way to do this? And I'm not opposed to entirely scapping the display:table design (unless it's for an actual table).
Mine does this:
And I want it to do this:
I want it to fill the available space and no more. Note - I have a 500px container to replicate the issue but in practice this will be a percenatge container and the issue occurs on window resize.
<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/
just try adding
table-layout: fixed;
to your table object. Unless you really don't want to set the green spans to 100px.
here is a jsfiddle example
EDIT: If you want the side "green" spans to resize/adjust to the content, you can cheat a little (we can since we are not dealing with a real html table), and set the .mid to display:table with a fixed layout (and setting the green ones width to something smaller - as it serves as minimum width). And it will work like a charm =)
这篇关于如何隐藏select2上溢出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
