16

我正在尝试使用 DropDown 实现两件事。

  • 首先，我想将文本包装在下拉列表中的选项列表中。
  • 其次，我想在每个选项之后加上一个边框

我想支持 IE（以及其他浏览器）。

这是因为我会在下拉列表中有很长的文本，我不想剪掉它们。出于这个原因，我想做上述的事情。

像这样的东西： -

http://jsfiddle.net/fnagel/GXtpC/embedded/result/

选择具有“与选项文本格式相同，选择地址”的选项。请注意选项是如何格式化的，并且每个选项都有一个边框底部。

这是我尝试过的（文本）：-

.myselect {
  width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.myselect option {
  white-space: nowrap;
  width: 100% border-bottom: 1px #ccc solid;
  /* This doesn't work. */
}
<select name="d" class="myselect">
  <option value="sdf" class="test1"> line text How to wrap the big line text </option>
  <option value="sdf2" class="test1"> line text How to wrap the big line text </option>
  <option value="sdf3" class="test1"> line text How to wrap the big line text </option>
  <option value="sdf4" class="test1"> line text How to wrap the big line text </option>
</select>

4

2 回答 2

7 

select {
  width: 100px;
  overflow: hidden;
  white-space: pre;
  text-overflow: ellipsis;
  -webkit-appearance: none;
}

option {
  border: solid 1px #DDDDDD;
}
<select name="d" class="myselect">
  <option value="sdf" class="test1"> line text How to wrap the big line text </option>
  <option value="sdf2" class="test1"> line text How to wrap the big line text </option>
  <option value="sdf3" class="test1"> line text How to wrap the big line text </option>
  <option value="sdf4" class="test1"> line text How to wrap the big line text </option>
</select>

于 2013-10-31T06:55:43.930 回答
5

当前接受的答案仅用省略号截断文本并添加不能完全解决手头问题的边框。

我觉得这是一个更完整、更跨浏览器兼容的答案：Make text in select element wrap when too long?

简而言之，您可以使用 javascript 以正确的方式执行此操作，也可以通过white-space: pre-wrap在您的选项元素上使用 css 属性以简单...不太兼容的方式执行此操作。

注意：如果您使用 using white-space: pre-wrap，请务必添加-moz-和-o-浏览器前缀。

这是我想出的一种快速、简单的 CSS 解决方案（尽管我提到的 Jquery 更健壮和更好）：

select {
  width: 200px;
  max-width: 100%;
  /* So it doesn't overflow from it's parent */
}

option {
  /* wrap text in compatible browsers */
  -moz-white-space: pre-wrap;
  -o-white-space: pre-wrap;
  white-space: pre-wrap;
  /* hide text that can't wrap with an ellipsis */
  overflow: hidden;
  text-overflow: ellipsis;
  /* add border after every option */
  border-bottom: 1px solid #DDD;
}
<select name="d" class="myselect">
  <option value="sdf" class="test1"> line text How to wrap the big line text </option>
  <option value="sdf2" class="test1"> line text How to wrap the big line text </option>
  <option value="sdf3" class="test1"> line text How to wrap the big line text </option>
  <option value="sdf4" class="test1"> line text How to wrap the big line text </option>
</select>

于 2017-07-14T15:15:10.497 回答