Ber*_*own 27 css jquery html-select content-length
也许这是一个简单的问题,也许不是.我有一个选择框,我用宽度硬编码.说120px.
<select style="width: 120px">
<option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option>
<option>ABC</option>
</select>我希望能够显示第二个选项,以便用户可以看到文本的全长.
像其他一切一样.这在Firefox中运行良好,但不适用于Internet Explorer6.
小智 14
我用以下代码修复了我的问题:
<div style="width: 180px; overflow: hidden;">
<select style="width: auto;" name="abc" id="10">
<option value="-1">AAAAAAAAAAA</option>
<option value="123">123</option>
</select>
</div>希望能帮助到你!
干杯,Cychan
Tom*_*lak 12
如果您选择预先存在固定的选项<select>,并且您不想以编程方式更改宽度,那么除非您获得一些创意,否则您可能会失败.
title属性设置为每个选项.这是非标准的HTML(如果你在这里关心这个小的违规行为),但IE(和Firefox也会)在鼠标悬停时用鼠标弹出显示整个文本.如果您稍后通过JavaScript添加长选项,请查看此处:如何在IE中动态更新HTML"选择"框
很老的问题，但这是解决方案。这里你有一个使用的工作片段jquery。它利用临时辅助，select将主选择中的选定选项复制到其中，以便可以评估主选择select应具有的真实宽度。
$('select').change(function(){
var text = $(this).find('option:selected').text()
var $aux = $('<select/>').append($('<option/>').text(text))
$(this).after($aux)
$(this).width($aux.width())
$aux.remove()
}).change()<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<option>ABC</option>
<option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option>
</select>小智 5
这模仿了您寻找的大部分行为:
<!--
I found this works fairly well.
-->
<!-- On page load, be sure that something else has focus. -->
<body onload="document.getElementById('name').focus();">
<input id=name type=text>
<!-- This div is for demonstration only. The parent container may be anything -->
<div style="height:50; width:100px; border:1px solid red;">
<!-- Note: static width, absolute position but no top or left specified, Z-Index +1 -->
<select
style="width:96px; position:absolute; z-index:+1;"
onactivate="this.style.width='auto';"
onchange="this.blur();"
onblur="this.style.width='96px';">
<!-- "activate" happens before all else and "width='auto'" expands per content -->
<!-- Both making a selection and moving to another control should return static width -->
<option>abc</option>
<option>abcdefghij</option>
<option>abcdefghijklmnop</option>
<option>abcdefghijklmnopqrstuvwxyz</option>
</select>
</div>
</body>
</html>
这将覆盖一些按键行为.
小智 5
将其放在 div 中并给它一个 id
<div id=myForm>
然后创建一个非常非常简单的CSS来配合它。
#myForm select {
width:200px; }
#myForm select:focus {
width:auto; }
这就是你所需要的。
小智 5
我通过在选择中将最小宽度和最大宽度设置为相同的值，然后将选择：焦点设置为自动来修复它。
select {
min-width: 120px;
max-width: 120px;
}
select:focus {
width: auto;
}<select style="width: 120px">
<option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option>
<option>ABC</option>
</select>