HTML select会在点击时截断文本(使用Google Chrome) [英] HTML select truncates text on click (using Google Chrome)
问题描述
我正在尝试创建一个简单的选择元素.
I'm trying to create a simple select element.
选项的长度是未知的，取决于用户的输入.
The options' length isn't known in advance, and depend on the user's input.
我当前使用的代码是:
<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>
我希望select元素具有固定的宽度，然后当输入长行时，用户应该可以滚动.
I'd like the select element to have a fixed width, and then when long lines are entered the user should be able to scroll.
问题
当我选择该选项时，使用当前代码会截断该选项的文本("a"的数量等于"b"的数量):
Using the current code truncates the option's text when I select it (number of 'a's is equal to number of 'b's):
有人知道选择选项时如何解决截断吗?
推荐答案
option标记继承了父select标记的宽度.这意味着通过将选择宽度定义为325像素，您还将每个选项的宽度也定义为325像素.我不知道为什么它只适用于选定的选项，我正在研究它.
The option tag inherits the parent select tag's width. This means that by defining the selects width as 325px, you are defining each of the option's width as 325px too. I have no idea why it only applies to the selected option, I'm looking into it.
您可以创建包装器元素，并将select标记的样式应用于wrapper.像这样:
You could create a wrapper element and apply the styling of the select tag to the wrapper. Like so:
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>
尽管您可以看到，但这会将垂直滚动条隐藏在屏幕之外，因此并不是一个完美的解决方案. 如果找到其他解决方案，我将更新我的答案.
Although as you can see, this hides the vertical scroll bar off screen so it's not a perfect fix. I'll update my answer if I find another solution.
此外，您可能已经注意到我使用了相应的CSS属性，而不是table和td标签的属性:如今，这已获得更多认可，但您的方法很好，因此，如果还原它，则不会造成任何危害.
Also, you may have noticed I used the corresponding CSS properties instead of attributes for the table and td tags: this is more approved nowadays but your method was fine so no harm done if you revert it.
这篇关于HTML select会在点击时截断文本(使用Google Chrome)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
