style(Tab): improve text size adjust, fix ellipsis issue (#6209)

src/tabs/Title.js

@@ -1,4 +1,4 @@
-import { createNamespace } from '../utils';
+import { createNamespace, isDef } from '../utils';
 import Info from '../info';
 
 const [createComponent, bem] = createNamespace('tab');
@@ -55,6 +55,25 @@ export default createComponent({
     onClick() {
       this.$emit('click');
     },
+
+    genText() {
+      const Text = (
+        <span class={bem('text', { ellipsis: this.ellipsis })}>
+          {this.slots() || this.title}
+        </span>
+      );
+
+      if (this.dot || (isDef(this.info) && this.info !== '')) {
+        return (
+          <span class={bem('text-wrapper')}>
+            {Text}
+            {<Info dot={this.dot} info={this.info} />}
+          </span>
+        );
+      }
+
+      return Text;
+    },
   },
 
   render() {
@@ -68,17 +87,11 @@ export default createComponent({
             disabled: this.disabled,
             complete: !this.ellipsis,
           }),
-          {
-            'van-ellipsis': this.ellipsis,
-          },
         ]}
         style={this.style}
         onClick={this.onClick}
       >
-        <span class={bem('text')}>
-          {this.slots() || this.title}
-          <Info dot={this.dot} info={this.info} />
-        </span>
+        {this.genText()}
       </div>
     );
   },

src/tabs/index.less

@@ -2,14 +2,14 @@
 
 .van-tab {
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   flex: 1;
   box-sizing: border-box;
-  min-width: 0; // hack for flex ellipsis
-  padding: 0 5px;
+  padding: 0 @padding-base;
   color: @tab-text-color;
   font-size: @tab-font-size;
-  line-height: @tabs-line-height;
-  text-align: center;
   cursor: pointer;
 
   &--active {
@@ -23,6 +23,15 @@
   }
 
   &__text {
+    &--ellipsis {
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+  }
+
+  &__text-wrapper {
     position: relative;
   }
 }
@@ -52,8 +61,8 @@
       }
 
       .van-tabs__nav {
-        overflow: hidden;
         overflow-x: auto;
+        overflow-y: hidden;
         -webkit-overflow-scrolling: touch;
 
         &::-webkit-scrollbar {
@@ -84,7 +93,6 @@
 
       .van-tab {
         color: @tabs-default-color;
-        line-height: @tabs-card-height - 2px;
         border-right: @border-width-base solid @tabs-default-color;
 
         &:last-child {