如何隱藏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