HTML Dropdown（select），包含Text Wrap和Border之后的每个值（选项）

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/

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):-

这是我试过的（文字）： -

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

CSS

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

    white-space: nowrap;
    width: 100%
         border-bottom: 1px #ccc solid; /* This doesn't work. */
}

2 个解决方案

#1

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

}
option {
          border: solid 1px #DDDDDD; 
}

#2

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-wrap on your option elements.

简而言之，您可以使用javascript以正确的方式执行此操作，或者通过使用css属性white-space：pre-wrap在您的选项元素上轻松实现...不那么兼容的方式。

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

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

#1

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

}
option {
          border: solid 1px #DDDDDD; 
}

#2