如何隐藏select2上的溢出？
Posted
技术标签:
【中文标题】如何隐藏select2上的溢出？【英文标题】：How to hide overflow on select2? 【发布时间】：2013-05-08 02:57:46 【问题描述】：我正在使用出色的select2 jquery 控件。 我正在尝试使用 CSS div 布局来模仿 3 单元格表格显示布局。 当 selected 大于当前 select2 宽度时，控件通常会用省略号隐藏溢出。在我的布局中，select2 控件显示了整个文本并超出了“表格”div 的范围。我希望它隐藏溢出 - 有没有办法做到这一点？而且我不反对完全移除 display:table 设计（除非它是用于实际的桌子）。
我是这样做的：
我希望它这样做：
我希望它填满可用空间，仅此而已。注意 - 我有一个 500px 的容器来复制问题，但实际上这将是一个百分比容器，并且问题发生在调整窗口大小时。
<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/
【问题讨论】：
【参考方案1】：尝试添加
table-layout: fixed;
到您的table 对象。除非您真的不想将绿色跨度设置为 100 像素。
这是jsfiddle example
编辑：如果您希望边“绿色”跨度调整大小/调整内容，您可以稍微作弊（我们可以，因为我们不是在处理真正的 html 表格），并且使用固定布局将.mid 设置为display:table（并将绿色宽度设置为更小 - 因为它用作最小宽度）。它会像魅力一样工作=)
jsfiddle for this solution
【讨论】：
正是我需要的！我为此苦苦挣扎了一段时间，这是一个如此简单的解决方案！谢谢！ 我现有的 HTML 将表格 div 包装在 P 中，这会导致问题 - 任何想法 - jsfiddle.net/L5yKC 问题是在你的标记中你使用了类名row，但是在css中你调用了.table-row。我在上面的小提琴中修复了这个问题，但忘了提，抱歉。现在我再次修复它并更新了您的jsfiddle。但我很好奇你想用段落标签实现什么？ =)
使用现有的 HTML。我们有很多行，就像这个例子一样，每一行都被一个 P 标签包围。
我明白了 =) 我以为你想用 p 标签做一些特殊的魔法 ;-) ...但现在看来你不想更改 html，所以我修正了错字在错误的一端......你应该在CSS中将它更改为.row，但我想你已经知道了。祝你好运！ ^_^以上是关于如何隐藏select2上的溢出？的主要内容，如果未能解决你的问题，请参考以下文章