HTML 下拉菜单(选择),每个值(选项)后带有文本换行和边框 [英] HTML Dropdown (select) with Text Wrap and Border after every value (option)
本文介绍了HTML 下拉菜单(选择),每个值(选项)后带有文本换行和边框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图通过 DropDown 实现两件事.
I am trying to achieve two things with DropDown.
- 首先,我想将文本包装在下拉列表中的选项列表中.
- 其次,我想在每个选项后面加一个边框
并且我想支持 IE(以及其他浏览器).
and I want to support IE (and other browsers too).
这是因为我在下拉菜单中会有很长的文本并且我不想剪掉它们.为此,我想做上述的事情.
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.
像这样:-
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>
推荐答案
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>
这篇关于HTML 下拉菜单(选择),每个值(选项)后带有文本换行和边框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文