每个值(选项)后带有文本换行和边框的HTML下拉列表(选择)

Question

我试图用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>

Answer 1

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

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

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

注意：如果您使用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>

Answer 2

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>