Descriptions: fix label slot bug (ElemeFE#21462)

EOITek · Nov 19, 2021 · bd45cd4 · bd45cd4
1 parent a8e3a2d
commit bd45cd4
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/packages/descriptions/src/descriptions-row.js b/packages/descriptions/src/descriptions-row.js
@@ -100,7 +100,7 @@ export default {
                         [item.labelClassName]: true
                       }}
                       style={item.labelStyle}
-                    >{item.props.label}</span>
+                    >{item.label}</span>
                     <span
                       class={['el-descriptions-item__content', item.contentClassName]}
                       style={item.contentStyle}

diff --git a/packages/theme-chalk/src/descriptions-item.scss b/packages/theme-chalk/src/descriptions-item.scss
@@ -2,9 +2,19 @@
 @import 'common/var';
 
 @include b(descriptions-item) {
+  vertical-align: top;
 
   @include e(container) {
     display: flex;
+
+    .el-descriptions-item__label,
+    .el-descriptions-item__content {
+      display: inline-flex;
+      align-items: baseline;
+    }
+    .el-descriptions-item__content {
+      flex: 1;
+    }
   }
 
   @include e(label) {
@@ -20,13 +30,13 @@
       color: $--color-text-secondary;
       background: $--descriptions-item-bordered-label-background;
     }
-
     &:not(.is-bordered-label) {
       margin-right: 10px;
     }
   }
 
   @include e(content) {
-
+    word-break: break-word;
+    overflow-wrap: break-word;
   }
 }