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

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 2

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

文本无法包含在原生选择中。您可以使用jquery插件来实现此目的。 Here are more details

你仍然可以尝试这个，看它是否有效：

break-word表示如果行中没有其他可接受的断点，通常牢不可破的单词可能会在任意点被破坏。

预先保留空格的序列，仅在源中的换行符处以及在。处断行元件。

预包装保留空白的序列。换行符处的行被打破，并在必要时填写线框。

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

Answer 3

默认选择框基于浏览器工作，我们可以删除箭头，我们可以使/应用css看起来像是自定义的但不是打破单词的选项。要实现这一点，我们需要使用 - select2，custom-select，selected等插件

用于下拉破坏div边界的CSS解决方案

3 个答案: