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

Question

我试图通过 DropDown 实现两件事。

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

而且我想支持 IE(以及其他浏览器)。

这是因为下拉列表中的文本很长，我不想剪掉它们。因此，我想做上述事情。

像这样:-

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

select the one with "Same with option text formatting, Select an Address". Notice how the options are formatted and have a border-bottom with each of them.

这是我尝试过的(文本):-

.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 element wrap when too long?

简而言之，您可以通过使用 javascript 以正确的方式完成它，或者通过使用 css 属性 white-space: pre-wrap在您的选项元素上。

注意:如果您使用 white-space: pre-wrap，be sure to add -moz- and -o- browser prefixes.

---

这是我提出的一种快速、简单的 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>