From 2dfdaa4869b9f90d517f24f0d1d70c4385a2c0d4 Mon Sep 17 00:00:00 2001 From: cs1707 Date: Tue, 17 Aug 2021 18:48:04 +0800 Subject: [PATCH] Select: fix long text overflow in multiple mode --- packages/theme-chalk/src/select-dropdown.scss | 3 +++ packages/theme-chalk/src/select.scss | 10 +++++++--- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/theme-chalk/src/select-dropdown.scss b/packages/theme-chalk/src/select-dropdown.scss index f9b3b4fd929..8fb607c3a1e 100644 --- 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 index d5f6a30d1ba..f337ae99caf 100644 --- a/packages/theme-chalk/src/select.scss +++ b/packages/theme-chalk/src/select.scss @@ -119,8 +119,9 @@ flex-wrap: wrap; } - .el-tag__close { - margin-top: -2px; + @include e(tags-text) { + overflow: hidden; + text-overflow: ellipsis; } .el-tag { @@ -128,12 +129,15 @@ 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;