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

HTML Dropdown (select) with Text Wrap and Border after every value (option)

提问by Steve

I am trying to achieve two things with DropDown.

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

• First I want to Wrap the text in the list of options within a dropdown.
• Second, I want to put a border after every option

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

and I want to support IE (and other browsers too).

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

This is because I would have long text in the dropdown and I don't wish to cut them. For that reason, I want to do the aforementioned things.

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

Something like this:-

像这样的东西：-

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

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.

选择“与选项文本格式相同，选择地址”的那个。请注意选项的格式以及每个选项的底部边框。

Here is what I tried (Text):-

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

.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>

采纳答案by Ashok Dhakhada

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>

回答by Nathan Blair

The currently accepted answer only truncates text with ellipsis and adds a border which doesn't completely solve the problem at hand.

当前接受的答案只截断带有省略号的文本并添加了一个不能完全解决手头问题的边框。

I feel like this is a more complete, more cross-browser compatible answer: Make text in select element wrap when too long?

我觉得这是一个更完整、更跨浏览器兼容的答案：让文本在选择元素换行时太长？

In a nutshell, you can either do it the right way by using javascript, or do it the easy... not so compatible way by using the css property white-space: pre-wrapon your option elements.

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

Note: if you go with using white-space: pre-wrap, be sure to add -moz-and -o-browser prefixes.

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

---

---

Here's what I've come up with as a quick, simple CSS solution (though the Jquery one I've mentioned is more robust and better):

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