소스 검색

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;