Fix Cascader item overflow style, close #2515

components/cascader/demo/basic.md

@@ -16,7 +16,31 @@ const options = [{
     label: '杭州',
     children: [{
       value: 'xihu',
-      label: '西湖',
+      label: '西湖西湖西湖西湖西湖西湖',
+    }, {
+      value: 'xihu1',
+      label: '西湖西湖西湖西湖西湖西湖',
+    }, {
+      value: 'xihu2',
+      label: '西湖西湖西湖西湖西湖西湖',
+    }, {
+      value: 'xihu3',
+      label: '西湖西湖西湖西湖西湖西湖',
+    }, {
+      value: 'xihu4',
+      label: '西湖西湖西湖西湖西湖西湖',
+    }, {
+      value: 'xihu5',
+      label: '西湖西湖西湖西湖西湖西湖',
+    }, {
+      value: 'xihu6',
+      label: '西湖西湖西湖西湖西湖西湖',
+    }, {
+      value: 'xihu7',
+      label: '西湖西湖西湖西湖西湖西湖',
+    }, {
+      value: 'xihu8',
+      label: '西湖西湖西湖西湖西湖西湖',
     }],
   }],
 }, {
@@ -27,7 +51,7 @@ const options = [{
     label: '南京',
     children: [{
       value: 'zhonghuamen',
-      label: '中华门',
+      label: '中华门中华门中华门中华门中华门',
     }],
   }],
 }];

components/cascader/style/index.less

@@ -27,13 +27,16 @@
 
     &-label {
       position: absolute;
-      top: 0;
+      left: 0;
-      left: 8px;
       height: 20px;
       line-height: 20px;
       top: 50%;
       margin-top: -10px;
       white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      width: 100%;
+      padding: 0 12px 0 8px;
     }
 
     &-clear {
@@ -137,11 +140,9 @@
     }
   }
   &-menu-item {
-    padding: 7px 16px;
+    padding: 7px 26px 7px 16px;
     cursor: pointer;
     white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
     transition: all 0.3s ease;
     &:hover {
       background: tint(@primary-color, 90%);