在使用 Element UI 的 el-autocomplete 组件时，你是否遇到过这样的困扰：当下拉选项中包含较长的文字时，默认的下拉面板宽度与输入框一致，导致文字被截断或折行显示，影响用户体验。本文将分享一种简洁高效的解决方案，让下拉框最小宽度与输入框保持一致，同时能够根据内容自动撑开，完整显示所有选项文字。
最终效果预览
下拉框宽度不小于输入框宽度，保持视觉统一。
遇到长文本时，下拉框自动扩展宽度，文字不换行、不省略。
样式干净，仅需几行 CSS 即可完成。
完整代码实现
模板部分
<el-autocomplete
v-model="searchForm.name"
:fetch-suggestions="querySearchAsync"
placeholder="请输入房源名称"
clearable
size="small"
value-key="value"
@select="handleSelect"
:debounce="300"
:popper-append-to-body="false"
popper-class="autocomplete-suggestion-wide"
>
<template slot-scope="{ item }">
<div :style="item.value === '暂无数据' ? 'color: #999;' : ''">
{{ item.value }}
</div>
</template>
</el-autocomplete>样式部分
/* 注意：以下样式建议写在全局样式文件中，或使用 ::v-deep 穿透 scoped 限制 */
.autocomplete-suggestion-wide {
width: auto !important;
min-width: 100% !important;
}
.autocomplete-suggestion-wide li {
white-space: nowrap;
overflow: visible;
}
核心配置解析
1. popper-class="autocomplete-suggestion-wide"
为下拉面板指定一个自定义 CSS 类名，以便精准控制其样式。
2. :popper-append-to-body="false"
将下拉面板挂载到组件所在元素内部，而非 <body> 下。这样做的好处是：
min-width: 100%可以相对于输入框父容器计算，自动等于输入框当前宽度。避免因挂载到
body导致的层叠上下文或z-index问题。
若你的输入框处于复杂的定位环境中（如
fixed定位的对话框内），也可以保持:popper-append-to-body="true"（默认值），此时min-width: 100%依然有效，因为 Element UI 的 Popper 机制会将触发元素宽度传递给弹出层。
3. width: auto !important
覆盖 Element UI 默认的固定宽度样式，让下拉面板宽度根据内容自适应。
4. min-width: 100% !important
保证下拉面板宽度不会小于输入框的宽度，避免出现比输入框还窄的尴尬情况。
5. 针对 li 的样式设置
.autocomplete-suggestion-wide li {
white-space: nowrap; /* 强制文字不换行 */
overflow: visible; /* 允许文字超出容器（由父级 auto 宽度承载） */
}这里直接对下拉选项的 li 元素进行控制，确保选项内部的文字始终单行显示，从而触发父容器 width: auto 的撑开效果。
可选增强：处理超长文本
如果单个单词（如英文长 URL）过长导致撑开宽度超出屏幕，可以给 .autocomplete-suggestion-wide 添加一个 max-width 限制，并配合 word-break: break-word 优雅换行：
.autocomplete-suggestion-wide {
width: auto !important;
min-width: 100% !important;
max-width: 90vw; /* 限制最大宽度为视口宽度的 90% */
}
.autocomplete-suggestion-wide li {
white-space: normal; /* 允许换行 */
word-break: break-word;
}
