Q-Select选中内容超出输入框，如何截断过长选项？

针对Q-Select选中超长选项后文本溢出的问题，有几种实用的解决方式：

方法1：使用CSS全局/局部截断 #

直接给Q-Select的选中文本容器添加文本截断样式，这是最简单的方案：

/* 局部样式（在组件<style>标签中添加scoped，仅当前组件生效） */
.q-select__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

这种方式无需修改组件结构，若去掉scoped则会对项目中所有Q-Select生效。

方法2：自定义选中项插槽（灵活控制单组件样式） #

利用Q-Select的selected插槽，单独控制当前组件选中项的显示样式，避免影响其他Q-Select：

<q-select
  square
  outlined
  fill-input
  standout="bg-grey-3 text-white"
  v-model="unit_selection"
  :options="units"
  options-dense
  dense
>
  <template v-slot:selected="scope">
    <span style="display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
      {{ scope.option }}
    </span>
  </template>
</q-select>

这种方式可以针对单个Q-Select定制样式，比如调整截断的触发条件、添加额外装饰等。

方法3：自定义文本截断逻辑（精确控制长度） #

如果需要自定义截断长度或添加特定后缀（如“...”），可以使用Vue过滤器处理文本：

步骤1：在组件中定义过滤器 #

export default {
  filters: {
    truncateText(value, maxLength = 35) {
      if (!value) return '';
      return value.length > maxLength 
        ? `${value.slice(0, maxLength)}...` 
        : value;
    }
  },
  // 其他组件代码
}

步骤2：在插槽中使用过滤器 #

<q-select
  square
  outlined
  fill-input
  standout="bg-grey-3 text-white"
  v-model="unit_selection"
  :options="units"
  options-dense
  dense
>
  <template v-slot:selected="scope">
    {{ scope.option | truncateText(40) }}
  </template>
</q-select>

这种方式可以精确控制截断长度，适合对文本显示有特定要求的场景。

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