From 328cb574aec1ba5e30bdd9d76a298f2f79035340 Mon Sep 17 00:00:00 2001
From: LIUCHAO <50739490+Tsong-LC@users.noreply.github.com>
Date: Mon, 5 Sep 2022 22:29:45 +0800
Subject: [PATCH] fix(components): [select] fix content overflow (#9633)

closed #9560
---
 packages/components/select/src/select.vue | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/components/select/src/select.vue b/packages/components/select/src/select.vue
index 8f67e5d024..7e849e40d9 100644
--- a/packages/components/select/src/select.vue
+++ b/packages/components/select/src/select.vue
@@ -44,11 +44,9 @@
                 disable-transitions
                 @close="deleteTag($event, selected[0])"
               >
-                <span
-                  :class="nsSelect.e('tags-text')"
-                  :style="{ maxWidth: inputWidth - 123 + 'px' }"
-                  >{{ selected[0].currentLabel }}</span
-                >
+                <span :class="nsSelect.e('tags-text')" :style="tagTextStyle">
+                  {{ selected[0].currentLabel }}
+                </span>
               </el-tag>
               <el-tag
                 v-if="selected.length > 1"
@@ -500,6 +498,14 @@ export default defineComponent({
       width: '100%',
     }))
 
+    const tagTextStyle = computed(() => {
+      const maxWidth =
+        unref(inputWidth) > 123
+          ? unref(inputWidth) - 123
+          : unref(inputWidth) - 75
+      return { maxWidth: `${maxWidth}px` }
+    })
+
     provide(
       selectKey,
       reactive({
@@ -627,6 +633,7 @@ export default defineComponent({
       wrapperKls,
       selectTagsStyle,
       nsSelect,
+      tagTextStyle,
     }
   },
 })