瀏覽代碼

Select: fix long text overflow in multiple mode (#21237)

好多大米 4 年之前
父節點
當前提交
eeb9a93e86
共有 2 個文件被更改,包括 10 次插入3 次删除
  1. 3 0
      packages/theme-chalk/src/select-dropdown.scss
  2. 7 3
      packages/theme-chalk/src/select.scss

+ 3 - 0
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;

+ 7 - 3
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;