CSS解决方案下拉突破格边框

Question

我有一个很长的价值下拉选项。当我选择一个长的值时，它超出了包含div的边界。此外，选定项目上方的项目将显示在上方而不是“下拉”。这是第一个选项“ALL”向上而不是向下。

我搜索并找到了一些Javascript方法来解决这个问题。什么是解决这个问题的CSS方法？

注意：在IE11和Chrome中观察到的问题。在IE6中，它工作得很好。

问题

<div style="width:500px; background-color:gray"> 
 

 
    <table class="table-tab-body" cellspacing="0" cellpadding="0" width="100%" style="border-bottom: 2px solid #5F005F;"> 
 
    <tbody> 
 
     <tr> 
 
     <td colspan="2"> 
 
      <b style="margin: 0 0 0 10px;"> 
 
      Select Provider 
 
      </b> 
 
     </td> 
 
     <td colspan="2"> 
 
      <b> 
 
      Select Locations 
 
      </b> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td colspan="2" style="overflow:hidden; border: 3px solid purple; "> 
 
      <div style="margin: 0 0 0 10px; padding: 0 0 0 0px; overflow:hidden; width:245px; "> 
 
      <select name="drpVendor" id="drpVendor" fieldname="Vendor" style="width: 250px; padding: 0 0 0 0px; overflow:hidden;"> 
 
       <option selected="selected" value="">ALL</option> 
 
       <option value="11824">A SCD GARMENT CO LTD DIV (678904), Kerala, India</option> 
 
      </select> 
 
      </div> 
 
     </td> 
 
     <td colspan="2" style="overflow:hidden; border: 1px solid blue; "> 
 
      <select name="drpVendorFacility" id="drpVendorFacility" fieldname="Facility" style="width: 250px;"> 
 
      <option value="1">ALL</option> 
 
      </select> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td colspan="4"> 
 
      <hr> 
 
     </td> 
 
     </tr> 
 

 

 

 
    </tbody> 
 
    </table> 
 

 
    <input name="hidUserID" type="hidden" id="hidUserID" value="1"> 
 

 
</div>

IE6

Answer 1

选项字符串的长度是破坏div边界的原因。

文本无法用本地选择打包。你可以使用jquery插件来实现这一点。 Here are more details

不过，你可以尝试这一点，看看它是否工作：

破字表示一般牢不可破的话可以在任意点，如果没有，否则在该行可以接受的破发点被打破。

pre保留空白的序列，仅在源和元素的换行符处破坏行。

pre-wrap保留空白序列。行以新行字符分隔，在 处，并根据需要填充行框。

word-wrap: break-word;  /* IE*/ 
    white-space: -moz-pre-wrap; /* Firefox */ 
    white-space: pre-wrap;  /* other browsers */ 
    width:150px; 
    display:inline-block 

Answer 2

1）首先，你两个选择框的宽度比包含它的列的宽度更大的（你需要考虑到所有填充和边距中使用）。
将每个选择框的宽度设置为大约230px后，它们应该适合。

2）你说：“当你选择一个长的值，它超越了包含div的边界”。
由于您的选择选项包含的字符多于您的选择框的宽度，因此它必须展开到宽度足够宽，以便选项在下拉时可以看到。这不是一个错误，这是它的意图。
如果您想要的下拉宽度与您的选择框相同，可以通过多行显示特别冗长的选项。就我所知，没有一个好的跨浏览器兼容的纯CSS解决方案。 但是，您可以通过使用javascript/jquery + CSS的组合来实现此目的。

3）向上/向下“问题”与浏览器呈现元素/ CSS的不同方式有关。
使用第2点建议的javascript/jquery解决方案可以改进此“问题”。

4）请注意，IE7及以下版本不支持很多javascript/jquery解决方案这种类型的问题，但是在这个时代，不提供对IE6和7的全面支持是相当不错的。
如果需要，您可以随时为旧浏览器提供单独的CSS样式表。 5）您可以轻松地将您当前的布局转换为Div + CSS，从而放弃使用表格，该表格应该只用于显示数据。
如果您在Div + CSS中进行布局比在表格中进行布局更容易使页面响应不同的屏幕尺寸。

6）我已经放在一起基于您的原始代码jquery插件解决方案的演示供您参考。 我保留了demo中的表格布局，但如第5点所述，如果可能的话，您应该考虑将布局转换为Div。

希望这会有所帮助。

$(function() { 
 
    $("#drpVendor").selectBoxIt({ 
 
    theme: "default", 
 
    defaultText: "ALL", 
 
    autoWidth: false 
 
    }); 
 
    $("#drpVendorFacility").selectBoxIt({ 
 
    theme: "default", 
 
    defaultText: "ALL", 
 
    autoWidth: false 
 
    }); 
 
});

@import url("http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.3.0/jquery.selectBoxIt.css"); 
 
.selectboxit-container .selectboxit, 
 
.selectboxit-container .selectboxit-options { 
 
    width: 225px; 
 
    /* Width of the dropdown button */ 
 
    border-radius: 3px; 
 
    margin-top: 3px; 
 
} 
 
.selectboxit-container span, 
 
.selectboxit-container .selectboxit-options a { 
 
    line-height: 20px; 
 
    height: 22px; 
 
} 
 
.selectboxit-options .selectboxit-option .selectboxit-option-anchor { 
 
    white-space: normal; 
 
    min-height: 22px; 
 
    height: auto; 
 
} 
 
.first { 
 
    padding: 0 0 0 10px; 
 
} 
 
.top { 
 
    padding-top: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.3.0/jquery.selectBoxIt.min.js"></script> 
 

 
<div style="width:500px; background-color:gray"> 
 

 
    <table class="table-tab-body" cellspacing="0" cellpadding="0" width="100%" style="border-bottom: 2px solid #5F005F;"> 
 
    <tbody> 
 
     <tr> 
 
     <td colspan="2" class="first top"> 
 
      <b>Select Provider</b> 
 
     </td> 
 
     <td colspan="2" class="top"> 
 
      <b> 
 
      Select Locations 
 
      </b> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td colspan="2" class="first"> 
 
      <select name="drpVendor" id="drpVendor" fieldname="Vendor"> 
 
      <option selected="selected" value="">ALL</option> 
 
      <option value="11824">A SCD GARMENT CO LTD DIV (678904), Kerala, India</option> 
 
      <option value="11825">A SCD GARMENT CO LTD DIV Sample, Sample, Sample</option> 
 
      </select> 
 
     </td> 
 
     <td colspan="2"> 
 
      <select name="drpVendorFacility" id="drpVendorFacility" fieldname="Facility"> 
 
      <option value="1">ALL</option> 
 
      <option value="2">Option 1</option> 
 
      <option value="3">Option 2</option> 
 
      </select> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td colspan="4"> 
 
      <hr> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 

 
    <input name="hidUserID" type="hidden" id="hidUserID" value="1"> 
 
</div>

Answer 3

基于浏览器的默认选择框的工作，我们可以删除的箭头，我们可以使/ CSS应用看成customed一个而不是选择突破字。 为了实现这一点，我们需要使用像 - select2，自定义选择，选择等插件