html - 在 IE8 和 IE9 中使用列表框和下拉菜单裁剪数据（文本）

Question

我遇到了一个奇怪的问题，即行数据条目的大小大于我的下拉列表和列表框的宽度。发生这种情况时，文本将被缩短。

发生这种情况的一些例子是：-

代码

守则如下：-

落下

<div class="level select">
    <select id="MainContent_cmbClientName" style="width:140px;">

        <option selected="selected" value="Select One Two Three Four Five Six Seven Eight">Select One Two Three Four Five Six Seven Eight</option>
        <option value="Select One Two Three Four Five Six Seven Eight">Select One Two Three Four Five Six Seven Eight</option>
        <option value="Select One Two Three Four Five Six Seven Eight">Select One Two Three Four Five Six Seven Eight</option>
        <option value="Select One Two Three Four Five Six Seven Eight">Select One Two Three Four Five Six Seven Eight</option>
        <option value="Select One Two Three Four Five Six Seven Eight">Select One Two Three Four Five Six Seven Eight</option>

    </select>
</div>

选择框

<select size="4" id="MainContent_lstFamilyStatus" class="client-bg-repeat" style="color:#000060;">


    <option value="1">Couple</option>
      <option value="2">Family with 2+ Children</option>
      <option value="3">Family with One Child</option>
      <option value="4">Single Female</option>
    <option value="5">Single Female and not willing to marry</option>

</select>

有什么办法可以解决这个问题，或者可能会将文本带到由于文本溢出而被剪切的下一行。

非常感谢。

Answer 1

找到下拉解决方案

<style>
.ctrDropDown{
    width:145px;
    font-size:11px;
}
.ctrDropDownClick{
    font-size:11px;

    width:300px;

}
.plainDropDown{
    width:145px;
    font-size:11px;
}
</style>


<select name="someDropDown" id="someDropDown" class="ctrDropDown" onBlur="this.className='ctrDropDown';" onMouseDown="this.className='ctrDropDownClick';" onChange="this.className='ctrDropDown';">
    <option value="">This is option 1.</option>
    <option value="">This is the second option, a bit longer.</option>
    <option value="">Drink to me only with thine eyes, and I will pledge with mine...</option>
</select>

它有效（感谢 Doug Boud）。

任何想法，我如何修复选择框并将溢出的文本带到下一行？

谢谢。