如何隐藏select2上的溢出？

我使用优秀的select2 jQuery控件。
我想模仿3单元格表格显示布局，使用CSS div布局。
当所选内容大于当前select2宽度时，控件通常用椭圆隐藏溢出。在我的布局中，select2控件显示了整个文本，并吹出了“表格”div的范围。我希望它能够隐藏溢出 - 有没有办法做到这一点？我并不反对完全放弃显示器：表格设计（除非是用于实际的表格）。如何隐藏select2上的溢出？

矿做到这一点：

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/

来源

2013-05-13 user210757