修复选择选项中下拉菜单的宽度

Question

当我打开下拉列表时，列表的宽度大于下拉框。 列表宽度应与下拉框相同。

Answer 1

您可以使用以下内容：

select, option { width: __; }

请注意，这可能不适用于Google Chrome。如果你想要一个跨浏览器的解决方案，你可能不得不使用PHP来剪切String和SubStr。您也可以使用jQuery来设置选项文本的长度。

＆＃13;

＆＃13;

jQuery('#dropdown option').each(function() {
var optionText = this.text;
console.log(optionText);
var newOption = optionText.substring(0,19);
console.log(newOption);
jQuery(this).text(newOption + '..');
});

＆＃13;

select, option {
    width:150px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<table>
    <tr>
        <td>
            <select id="dropdown" style="width:150px;">
                <option value="test">123123123123123123123123123123</option>
                <option value="test2">123123123123123123123123123123</option>
                <option value="test3">123123123123123123123123123123</option>
            </select>
        </td>
        <td>
            <input type="text">
        </td>
    </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

JsFiddle

您必须设置

的子字符串值

var newOption = optionText.substring(0,19);

独自一人。

Answer 2

尝试设置与选择框相同的选项宽度

    #SelectBoxid {
  width:150px; 
}
 #SelectBoxid option{
   width:150px; 
}