Select: fix long text overflow in multiple mode

ElemeFE · Aug 17, 2021 · 2dfdaa4 · 2dfdaa4
1 parent 72be8f5
commit 2dfdaa4
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/packages/theme-chalk/src/select-dropdown.scss b/packages/theme-chalk/src/select-dropdown.scss
@@ -13,6 +13,9 @@
   margin: 5px 0;
 
   @include when(multiple) {
+    & .el-select-dropdown__item {
+      padding-right: 40px;
+    }
     & .el-select-dropdown__item.selected {
       color: $--select-option-selected-font-color;
       background-color: $--select-dropdown-background;

diff --git a/packages/theme-chalk/src/select.scss b/packages/theme-chalk/src/select.scss
@@ -119,21 +119,25 @@
     flex-wrap: wrap;
   }
 
-  .el-tag__close {
-    margin-top: -2px;
+  @include e(tags-text) {
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .el-tag {
     box-sizing: border-box;
     border-color: transparent;
     margin: 2px 0 2px 6px;
     background-color: #f0f2f5;
+    display: flex;
+    max-width: 100%;
+    align-items: center;
 
     &__close.el-icon-close {
       background-color: $--color-text-placeholder;
-      right: -7px;
       top: 0;
       color: $--color-white;
+      flex-shrink: 0;
 
       &:hover {
         background-color: $--color-text-secondary;