项目中使用的版本是:"ant-design-vue": "2.2.8"
给它设置个最大宽度试试看 max-width: 170px;
<template>
...
<Select
v-model:value="selectValue"
mode="multiple"
:maxTagCount="1" // 最多显示多少个 tag
:maxTagTextLength="2" // 最大显示的 tag 文本长度(不生效。。。)
placeholder="请选择"
allow-clear
>
<SelectOption
v-for="item in selectOptions"
:key="item.id"
:value="item.name"
>{{ item.name }}</SelectOption
>
</Select>
...
</template>
<script setup lang="ts">
import { ref } from 'vue';
const selectValue = ref('');
const selectOptions = ref([
{ id: '01', name: '好多字好多字好多字1' },
{ id: '02', name: '好多字好多字好多字2' },
{ id: '03', name: '好多字好多字好多字3' },
...
])
</script>
<style scoped lang="scss">
:deep(.ant-select-selection-item-content) {
max-width: 170px; // 设置最大宽度
}
</style>