Nuxt3中vue-select长文本致input换行，如何固定组件高度？

针对vue-select选中长文本时<input>换行、组件高度增加的问题，你需要调整组件内部选中区域的布局，同时处理长文本的截断逻辑，避免图标溢出。以下是具体解决方案：

核心CSS调整 #

替换你之前添加的.vs__selected样式，新增以下样式规则：

/* 调整选中区域的布局，为图标预留空间 */
.vs__selected-options {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 文本与图标之间的间距 */
  overflow: hidden;
}

/* 处理选中项长文本，强制单行并截断 */
.vs__selected {
  flex: 1; /* 让文本区域占据剩余可用空间 */
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
}

/* 确保搜索框也保持单行，避免高度变化 */
.vs__search {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

修改后的完整样式部分 #

将你的<style>块更新为：

<style src="vue-select/dist/vue-select.css"></style>
  
<style>
.vs__dropdown-menu,
.vs__dropdown-option--disabled {
  @apply bg-white dark:bg-slate-800;
}

.vs__dropdown-option,
.vs__selected,
.vs__search,
.vs__dropdown-option--disabled {
  @apply text-primary dark:text-white;
}

.vs__dropdown-option--disabled {
  @apply font-bold text-lg;
}

.vs__clear svg {
  @apply secondary-fill;
}

.vs__open-indicator {
  @apply secondary-fill;
}

/* 新增的长文本处理样式 */
.vs__selected-options {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
}

.vs__selected {
  flex: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
}

.vs__search {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

原理说明 #

• 之前的样式只处理了.vs__selected元素，但未调整其父容器.vs__selected-options的布局，导致图标没有足够空间而溢出。
• 通过flex布局让文本区域和图标在同一行排列，flex:1让文本占据剩余空间，配合white-space: nowrap和text-overflow: ellipsis实现长文本截断，同时保持组件高度稳定。

内容的提问来源于stack exchange，提问作者BATMAN_2008