也许这是一个简单的问题，也许不是。我有一个选择框，我在代码中硬编码了它的宽度，比如说120像素。
<select style="width: 120px">
<option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option>
<option>ABC</option>
</select>我希望能够展示第二个选项，以便用户可以看到完整的文本长度。
和其他一切一样。这在Firefox中运行良好，但在Internet Explorer6中无法正常工作。
我通过以下代码解决了我的问题：
<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>希望对你有所帮助！
<select>中有此选项，并且您不想通过编程更改其宽度，除非您稍微有些创意，否则可能会运气不佳。
title属性。 这是非标准HTML（如果您在意此轻微违规），但IE（以及Firefox）将在鼠标悬停时在鼠标弹出窗口中显示整个文本。如果您稍后通过JavaScript添加了一个较长的选项，请查看此处：如何在IE中动态更新HTML“select”框。
虽然这是一个很老的问题，但是这里有一个解决方案。下面是一个使用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>将它放在一个div中并给它一个id。
<div id=myForm>
#myForm select {
width:200px; }
#myForm select:focus {
width:auto; }
这就是你所需要的。
我在我的Bootstrap页面中通过将选择器的min-width和max-width设置为相同的值，然后将select:focus设置为auto来解决了这个问题。
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> <!--
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>
即使这个问题是从2008年开始的，仍然有一些情况你希望选择框的宽度与当前选择相匹配而不是最长的选项。下面是一个现代的解决方案：
它基本上和这个答案的原则差不多，只是没有使用jQuery。
selectedIndex的文本传递给选项。position: fixed和visibility: hidden样式。这确保了它不会影响您的布局，但其边界框仍然可以被测量。getBoundingClientRect().width获取该新元素所需的尺寸。const select = document.querySelector('select')
select.addEventListener('change', (event) => {
let tempSelect = document.createElement('select'),
tempOption = document.createElement('option');
tempOption.textContent = event.target.options[event.target.selectedIndex].text;
tempSelect.style.cssText += `
visibility: hidden;
position: fixed;
`;
tempSelect.appendChild(tempOption);
event.target.after(tempSelect);
const tempSelectWidth = tempSelect.getBoundingClientRect().width;
event.target.style.width = `${tempSelectWidth}px`;
tempSelect.remove();
});
select.dispatchEvent(new Event('change'));<select>
<option>Short option</option>
<option>Some longer option</option>
<option>An very long option with a lot of text</option>
</select>Array.from(document.querySelectorAll('.js-select-auto-expand'), (input) => {
let parent = input.parentNode;
function updateSize() {
parent.dataset.selectAutoExpand = input.value
}
input.addEventListener('input', updateSize);
updateSize();
});*,
*::before,
*::after {
box-sizing: border-box;
}
body {
padding: 2rem 4rem;
line-height: 1.5;
color: gray;
}
.article-test {
line-height: 2.5;
}
.select-auto-expand {
position: relative;
display: inline-block;
min-width: 2rem;
width: auto;
height: 30px;
line-height: 28px;
padding: 0 10px;
vertical-align: baseline;
border: 1px solid black;
background-color: transparent;
color: #fafafa;
font-size: 1rem;
}
.select-auto-expand .select-auto-expand__select {
position: absolute;
top: 0px;
bottom: 0;
left: 0;
right: 0;
width: 100%;
min-width: 1em;
height: 100%;
margin: 0 2px;
padding: 0 8px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0;
border: 0;
background: transparent;
font: inherit;
}
.select-auto-expand::after {
content: attr(data-select-auto-expand);
display: inline-block;
width: 100%;
min-width: 1em;
white-space: pre-wrap;
font: inherit;
line-height: inherit;
color: inherit;
background: transparent;
visibility: hidden;
opacity: 0;
}
.select-auto-expand:focus-within {
outline: 3px solid rgba(0, 0, 255, 0.3);
}
.select-auto-expand:focus-within input:focus {
outline: none;
}<form action="#" class="article-test">
<p>
Adipisci ipsum debitis quaerat commodi tenetur? Amet consectetur adipisicing elit. Lorem ipsum dolor sit,
<label class="select-auto-expand" for="pet-select">
<select name="pets" id="pet-select" class="select-auto-expand__select js-select-auto-expand">
<option value="select ...">select ...</option>
<option value="sed qui">sed qui</option>
<option value="veniam iste quis">veniam iste quis</option>
<option value="ipsum debitis">ipsum debitis</option>
<option value="officia excepturi repellendus aperiam">officia excepturi repellendus aperiam</option>
</select>
</label>
veniam iste quis, sed qui non dolores. Porro, soluta. Officia excepturi repellendus aperiam cumque consectetur distinctio, veniam iste quis, sed qui non dolores. Adipisci ipsum debitis quaerat commodi tenetur?
</p>
</form>Demo: https://codepen.io/astro87/pen/dyZerdg?editors=0010
灵感来源: https://filamentgroup.github.io/select-css/demo/ https://codepen.io/shshaw/full/bGNJJBEeventListener代码进行回传）在IE中为现有站点使用以下内容：if (jQuery.browser.msie) {
jQuery('#mySelect').focus(function() {
jQuery(this).width('auto');
}).bind('blur change', function() {
jQuery(this).width('100%');
});
};
var cWidth = jQuery('#mySelect').width();）来存储先前的宽度，但这就是我们需要的一切，以使其按照您的预期工作。好的，这个选项相当“hackish”，但应该可以工作。
$(document).ready( function() {
$('#select').change( function() {
$('#hiddenDiv').html( $('#select').val() );
$('#select').width( $('#hiddenDiv').width() );
}
}
这当然需要一个隐藏的 div。
<div id="hiddenDiv" style="visibility:hidden"></div>
哦，你需要 jQuery
）。 - undefined