如何控制Vue3+Quasar中多选q-select的高度避免文本溢出

方案1：单行显示选中内容，溢出隐藏 #

给q-select添加自定义类，通过CSS控制内部标签容器单行显示，溢出部分用省略号隐藏：

修改后的组件代码 #

<q-select 
  filled 
  v-model="selectedSpaces" 
  :options="allSpaces" 
  class="col-12 q-pa-md single-line-multi-select"
  multiple 
  emit-value 
  map-options
>
  <template v-slot:option="{ itemProps, opt, selected, toggleOption }">
    <q-item v-bind="itemProps">
      <q-item-section avatar>
        <q-checkbox :model-value="selected" @update:model-value="toggleOption(opt)"/>
      </q-item-section>
      <q-item-section>
        <q-item-label v-html="opt" />
      </q-item-section>
    </q-item>
  </template>
</q-select>

对应的CSS样式 #

.single-line-multi-select .q-select__tags {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 40px;
  display: flex;
  align-items: center;
}

.single-line-multi-select .q-select__tags .q-select__tag {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
}

方案2：自定义显示选中数量（更简洁） #

如果选中项过多，直接显示选中数量比堆砌标签更友好，通过label插槽自定义显示内容：

组件代码 #

<q-select 
  filled 
  v-model="selectedSpaces" 
  :options="allSpaces" 
  class="col-12 q-pa-md"
  multiple 
  emit-value 
  map-options
>
  <template v-slot:label>
    <span v-if="selectedSpaces.length > 0">
      已选 {{ selectedSpaces.length }} 项
    </span>
    <span v-else>
      请选择
    </span>
  </template>

  <template v-slot:option="{ itemProps, opt, selected, toggleOption }">
    <q-item v-bind="itemProps">
      <q-item-section avatar>
        <q-checkbox :model-value="selected" @update:model-value="toggleOption(opt)"/>
      </q-item-section>
      <q-item-section>
        <q-item-label v-html="opt" />
      </q-item-section>
    </q-item>
  </template>
</q-select>

为什么之前调整height无效？ #

q-select的选中标签是放在内部的.q-select__tags容器里的，直接给q-select设置max-height只会限制组件整体的高度，但内部标签容器依然会自动撑开，导致内容溢出到下方元素。必须针对.q-select__tags这个子元素设置单行显示或固定高度的样式才能解决问题。

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