我正在尝试创建一个简单的选择元素。
选项的长度事先未知，取决于用户的输入。
我目前使用的代码是:
<html>
<head>
</head>
<body>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" width="325">
<select multiple="" size="10" style="overflow-x:auto; overflow-y:auto; width:320px;">
<option value="a1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
<option value="b1">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>
</select>
</td>
</tr>
</tbody>
</table>
</body>
</html>
我希望选择元素具有固定宽度，然后当输入长行时用户应该能够滚动。
问题
当我选择它时，使用当前代码截断选项的文本(“a”的数量等于“b”的数量):
有谁知道如何解决选择选项时被截断的问题？
最佳答案
option 标签继承父select 标签的宽度。这意味着通过将选择宽度定义为 325px，您也将每个选项的宽度定义为 325px。我不知道为什么它只适用于选定的选项，我正在研究它。
您可以创建一个包装元素并将 select 标记的样式应用于 wrapper。像这样:
table{
border:0;
width:100%;
margin:0;
padding:0;
}
.wrapper{
overflow:auto;
width:320px;
height: calc(18px * 3); /*Option height * (select size+1)*/
vertical-align:top;
border:1px solid grey;
}
select{
border:0;
height:calc(100% - 2px);
overflow-y:visible;
}<table>
<tbody>
<tr>
<td>
<div class="wrapper">
<select multiple size="2">
<option value="a1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
<option value="b1">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>
</select>
</div>
</td>
</tr>
</tbody>
</table>尽管如您所见，这会将垂直滚动条隐藏在屏幕之外，因此这不是一个完美的解决方案。 如果我找到其他解决方案，我会更新我的答案。
此外，您可能已经注意到我使用了相应的 CSS 属性而不是 table 和 td 标签的属性:现在这种方法更受认可，但您的方法很好，所以如果您恢复它也没有坏处。
关于HTML 选择在点击时截断文本(使用谷歌浏览器)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31502259/