Question

我有一个选择菜单，其中选项文本很长，我希望它适合div的宽度，我也希望文本格式正确显示。

HTML：

<div Id"upgrade">
    <select class="option">
       <option value="Opt8">No Package Added</option>
       <option value="31"><strong>Standard Package</strong><br> text sdjhfdkj skdjghkdfjg kdjfghkd;fjgh kjghkdfj kjhgdkfjhg kjdfhkdj</option>
       <option value="40"><strong>fshgf</strong><br>jkdhfgida kjdfipusd sdk;fuh sdfh d;sofih dfhio[ih sd;fihero[</option>


       </select></div>

CSS

#upgrade select{width:75%; white-space:normal}
.option{width:75%; white-space:nomal ;}

该选项的文本只显示在一行中，我希望它看起来如下：

标准套餐
文字sdjhfdkj skdjghkdfjg kdjfghkd; fjgh kjghkdfj kjhgdkfjhg kjdfhkdj

然后在它溢出div的宽度时断开而不是在一行中继续。但仍然会在正常div

中显示下一行中的其余文本

欢迎任何帮助

Answer 1

您可以应用于选择元素及其选项的样式非常有限。如果您想要更多灵活性，可以尝试使用基于JavaScript的替代方案：

https://github.com/fnagel/jquery-ui/wiki/Selectmenu

Answer 2

尝试将long选项放在div中，然后将overflow和width设置为auto，但我不相信这会对你想要的效果起作用。这可能需要一些脚本！

如何使选择菜单的选项文本适合div

2 个答案: