diff --git a/src/coupon-list/test/__snapshots__/index.spec.js.snap b/src/coupon-list/test/__snapshots__/index.spec.js.snap
index 29171bccc..915cc62fd 100644
--- a/src/coupon-list/test/__snapshots__/index.spec.js.snap
+++ b/src/coupon-list/test/__snapshots__/index.spec.js.snap
@@ -12,8 +12,8 @@ exports[`empty-image prop 1`] = `
   <div class="van-tabs van-tabs--line van-coupon-list__tab">
     <div class="van-tabs__wrap">
       <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-        <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">可用 (0)<!----></span></div>
-        <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">不可用 (0)<!----></span></div>
+        <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">可用 (0)</span></div>
+        <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">不可用 (0)</span></div>
         <div class="van-tabs__line"></div>
       </div>
     </div>
@@ -62,8 +62,8 @@ exports[`render coupon list 1`] = `
   <div class="van-tabs van-tabs--line van-coupon-list__tab">
     <div class="van-tabs__wrap">
       <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-        <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">可用 (6)<!----></span></div>
-        <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">不可用 (2)<!----></span></div>
+        <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">可用 (6)</span></div>
+        <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">不可用 (2)</span></div>
         <div class="van-tabs__line"></div>
       </div>
     </div>
@@ -208,8 +208,8 @@ exports[`render empty coupon list 1`] = `
   <div class="van-tabs van-tabs--line van-coupon-list__tab">
     <div class="van-tabs__wrap">
       <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-        <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">可用 (0)<!----></span></div>
-        <div role="tab" class="van-tab van-tab--active van-ellipsis" aria-selected="true"><span class="van-tab__text">不可用 (0)<!----></span></div>
+        <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">可用 (0)</span></div>
+        <div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">不可用 (0)</span></div>
         <div class="van-tabs__line"></div>
       </div>
     </div>
diff --git a/src/empty/test/__snapshots__/demo.spec.js.snap b/src/empty/test/__snapshots__/demo.spec.js.snap
index 3771c5aba..fb3d618ca 100644
--- a/src/empty/test/__snapshots__/demo.spec.js.snap
+++ b/src/empty/test/__snapshots__/demo.spec.js.snap
@@ -12,9 +12,9 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-          <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">通用错误<!----></span></div>
-          <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">网络错误<!----></span></div>
-          <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">搜索提示<!----></span></div>
+          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">通用错误</span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">网络错误</span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">搜索提示</span></div>
           <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
         </div>
       </div>
diff --git a/src/index-bar/test/__snapshots__/demo.spec.js.snap b/src/index-bar/test/__snapshots__/demo.spec.js.snap
index 8e8a6208f..cf8eb2823 100644
--- a/src/index-bar/test/__snapshots__/demo.spec.js.snap
+++ b/src/index-bar/test/__snapshots__/demo.spec.js.snap
@@ -5,8 +5,8 @@ exports[`renders demo correctly 1`] = `
   <div class="van-tabs van-tabs--line">
     <div class="van-tabs__wrap van-hairline--top-bottom">
       <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #1989fa;">
-        <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">基础用法<!----></span></div>
-        <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">自定义索引列表<!----></span></div>
+        <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">基础用法</span></div>
+        <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">自定义索引列表</span></div>
         <div class="van-tabs__line" style="background-color: rgb(25, 137, 250); width: 0px; transform: translateX(0px) translateX(-50%);"></div>
       </div>
     </div>
diff --git a/src/list/test/__snapshots__/demo.spec.js.snap b/src/list/test/__snapshots__/demo.spec.js.snap
index 6faa69720..6d37e2079 100644
--- a/src/list/test/__snapshots__/demo.spec.js.snap
+++ b/src/list/test/__snapshots__/demo.spec.js.snap
@@ -5,9 +5,9 @@ exports[`renders demo correctly 1`] = `
   <div class="van-tabs van-tabs--line">
     <div class="van-tabs__wrap van-hairline--top-bottom">
       <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-        <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">基础用法<!----></span></div>
-        <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">错误提示<!----></span></div>
-        <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">下拉刷新<!----></span></div>
+        <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">基础用法</span></div>
+        <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">错误提示</span></div>
+        <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">下拉刷新</span></div>
         <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
       </div>
     </div>
diff --git a/src/pull-refresh/test/__snapshots__/demo.spec.js.snap b/src/pull-refresh/test/__snapshots__/demo.spec.js.snap
index 26df811a6..50db4583c 100644
--- a/src/pull-refresh/test/__snapshots__/demo.spec.js.snap
+++ b/src/pull-refresh/test/__snapshots__/demo.spec.js.snap
@@ -5,9 +5,9 @@ exports[`renders demo correctly 1`] = `
   <div class="van-tabs van-tabs--line">
     <div class="van-tabs__wrap van-hairline--top-bottom">
       <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-        <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">基础用法<!----></span></div>
-        <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">成功提示<!----></span></div>
-        <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">自定义提示<!----></span></div>
+        <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">基础用法</span></div>
+        <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">成功提示</span></div>
+        <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">自定义提示</span></div>
         <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
       </div>
     </div>
diff --git a/src/tab/test/__snapshots__/demo.spec.js.snap b/src/tab/test/__snapshots__/demo.spec.js.snap
index 742bde7c8..e8b7e703a 100644
--- a/src/tab/test/__snapshots__/demo.spec.js.snap
+++ b/src/tab/test/__snapshots__/demo.spec.js.snap
@@ -6,10 +6,10 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-          <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 1<!----></span></div>
-          <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 2<!----></span></div>
-          <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">标签 3<!----></span></div>
-          <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 4<!----></span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
+          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
           <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
         </div>
       </div>
@@ -33,9 +33,9 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-          <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 1<!----></span></div>
-          <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">标签 2<!----></span></div>
-          <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 3<!----></span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
+          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
           <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
         </div>
       </div>
@@ -54,14 +54,14 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-tabs__wrap--scrollable van-hairline--top-bottom">
         <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-          <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis" style="flex-basis: 22%;"><span class="van-tab__text">标签 1<!----></span></div>
-          <div role="tab" class="van-tab van-ellipsis" style="flex-basis: 22%;"><span class="van-tab__text">标签 2<!----></span></div>
-          <div role="tab" class="van-tab van-ellipsis" style="flex-basis: 22%;"><span class="van-tab__text">标签 3<!----></span></div>
-          <div role="tab" class="van-tab van-ellipsis" style="flex-basis: 22%;"><span class="van-tab__text">标签 4<!----></span></div>
-          <div role="tab" class="van-tab van-ellipsis" style="flex-basis: 22%;"><span class="van-tab__text">标签 5<!----></span></div>
-          <div role="tab" class="van-tab van-ellipsis" style="flex-basis: 22%;"><span class="van-tab__text">标签 6<!----></span></div>
-          <div role="tab" class="van-tab van-ellipsis" style="flex-basis: 22%;"><span class="van-tab__text">标签 7<!----></span></div>
-          <div role="tab" class="van-tab van-ellipsis" style="flex-basis: 22%;"><span class="van-tab__text">标签 8<!----></span></div>
+          <div role="tab" aria-selected="true" class="van-tab van-tab--active" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
+          <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
+          <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
+          <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
+          <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 5</span></div>
+          <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 6</span></div>
+          <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 7</span></div>
+          <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 8</span></div>
           <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
         </div>
       </div>
@@ -97,9 +97,9 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-          <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">标签 1<!----></span></div>
-          <div role="tab" class="van-tab van-tab--disabled van-ellipsis"><span class="van-tab__text">标签 2<!----></span></div>
-          <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 3<!----></span></div>
+          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
+          <div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
           <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
         </div>
       </div>
@@ -120,9 +120,9 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs van-tabs--card">
       <div class="van-tabs__wrap">
         <div role="tablist" class="van-tabs__nav van-tabs__nav--card">
-          <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">标签 1<!----></span></div>
-          <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 2<!----></span></div>
-          <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 3<!----></span></div>
+          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
         </div>
       </div>
       <div class="van-tabs__content">
@@ -142,8 +142,8 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-          <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">标签 1<!----></span></div>
-          <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 2<!----></span></div>
+          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
           <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
         </div>
       </div>
@@ -163,10 +163,10 @@ exports[`renders demo correctly 1`] = `
         <div class="van-sticky">
           <div class="van-tabs__wrap van-hairline--top-bottom">
             <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-              <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 1<!----></span></div>
-              <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 2<!----></span></div>
-              <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">标签 3<!----></span></div>
-              <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 4<!----></span></div>
+              <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
+              <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
+              <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
+              <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
               <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
             </div>
           </div>
@@ -192,8 +192,8 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-          <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text"><i class="van-icon van-icon-more-o"><!----></i>标签  <!----></span></div>
-          <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text"><i class="van-icon van-icon-more-o"><!----></i>标签  <!----></span></div>
+          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis"><i class="van-icon van-icon-more-o"><!----></i>标签  </span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis"><i class="van-icon van-icon-more-o"><!----></i>标签  </span></div>
           <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
         </div>
       </div>
@@ -211,10 +211,10 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-          <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">标签 1<!----></span></div>
-          <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 2<!----></span></div>
-          <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 3<!----></span></div>
-          <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 4<!----></span></div>
+          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
           <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
         </div>
       </div>
@@ -248,10 +248,10 @@ exports[`renders demo correctly 1`] = `
     <div class="van-tabs van-tabs--line">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-          <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 1<!----></span></div>
-          <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 2<!----></span></div>
-          <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">标签 3<!----></span></div>
-          <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">标签 4<!----></span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
+          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
           <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
         </div>
       </div>
@@ -277,14 +277,14 @@ exports[`renders demo correctly 1`] = `
         <div class="van-sticky">
           <div class="van-tabs__wrap van-tabs__wrap--scrollable van-hairline--top-bottom">
             <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-              <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis" style="flex-basis: 22%;"><span class="van-tab__text">标签 1<!----></span></div>
-              <div role="tab" class="van-tab van-ellipsis" style="flex-basis: 22%;"><span class="van-tab__text">标签 2<!----></span></div>
-              <div role="tab" class="van-tab van-ellipsis" style="flex-basis: 22%;"><span class="van-tab__text">标签 3<!----></span></div>
-              <div role="tab" class="van-tab van-ellipsis" style="flex-basis: 22%;"><span class="van-tab__text">标签 4<!----></span></div>
-              <div role="tab" class="van-tab van-ellipsis" style="flex-basis: 22%;"><span class="van-tab__text">标签 5<!----></span></div>
-              <div role="tab" class="van-tab van-ellipsis" style="flex-basis: 22%;"><span class="van-tab__text">标签 6<!----></span></div>
-              <div role="tab" class="van-tab van-ellipsis" style="flex-basis: 22%;"><span class="van-tab__text">标签 7<!----></span></div>
-              <div role="tab" class="van-tab van-ellipsis" style="flex-basis: 22%;"><span class="van-tab__text">标签 8<!----></span></div>
+              <div role="tab" aria-selected="true" class="van-tab van-tab--active" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
+              <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
+              <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
+              <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
+              <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 5</span></div>
+              <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 6</span></div>
+              <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 7</span></div>
+              <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 8</span></div>
               <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
             </div>
           </div>
diff --git a/src/tab/test/__snapshots__/index.spec.js.snap b/src/tab/test/__snapshots__/index.spec.js.snap
index 8f9fbc505..6f4a6c641 100644
--- a/src/tab/test/__snapshots__/index.spec.js.snap
+++ b/src/tab/test/__snapshots__/index.spec.js.snap
@@ -17,9 +17,9 @@ exports[`change tabs data 1`] = `
     <div class="van-sticky">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #ee0a24;">
-          <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">title1<!----></span></div>
-          <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">title2<!----></span></div>
-          <div role="tab" class="van-tab van-tab--disabled van-ellipsis"><span class="van-tab__text">title3<!----></span></div>
+          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
+          <div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
           <div class="van-tabs__line" style="background-color: rgb(238, 10, 36);"></div>
         </div>
       </div>
@@ -41,9 +41,9 @@ exports[`change tabs data 2`] = `
 <div class="van-tabs van-tabs--card">
   <div class="van-tabs__wrap">
     <div role="tablist" class="van-tabs__nav van-tabs__nav--card" style="border-color: blue;">
-      <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis" style="border-color: blue; background-color: blue;"><span class="van-tab__text">title1<!----></span></div>
-      <div role="tab" class="van-tab van-ellipsis" style="border-color: blue; color: blue;"><span class="van-tab__text">title2<!----></span></div>
-      <div role="tab" class="van-tab van-tab--disabled van-ellipsis" style="border-color: blue;"><span class="van-tab__text">title3<!----></span></div>
+      <div role="tab" aria-selected="true" class="van-tab van-tab--active" style="border-color: blue; background-color: blue;"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
+      <div role="tab" class="van-tab" style="border-color: blue; color: blue;"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
+      <div role="tab" class="van-tab van-tab--disabled" style="border-color: blue;"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
     </div>
   </div>
   <div class="van-tabs__content">
@@ -62,9 +62,9 @@ exports[`click to switch tab 1`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
     <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-      <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">title1<!----></span></div>
-      <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">title2<!----></span></div>
-      <div role="tab" class="van-tab van-tab--disabled van-ellipsis"><span class="van-tab__text">title3<!----></span></div>
+      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
+      <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
+      <div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
       <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
     </div>
   </div>
@@ -84,9 +84,9 @@ exports[`click to switch tab 2`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
     <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-      <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">title1<!----></span></div>
-      <div role="tab" class="van-tab van-tab--active van-ellipsis" aria-selected="true"><span class="van-tab__text">title2<!----></span></div>
-      <div role="tab" class="van-tab van-tab--disabled van-ellipsis"><span class="van-tab__text">title3<!----></span></div>
+      <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
+      <div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
+      <div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
       <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%); transition-duration: 0.3s;"></div>
     </div>
   </div>
@@ -104,7 +104,9 @@ exports[`dot prop 1`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
     <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-      <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text"><div class="van-info van-info--dot"></div></span></div>
+      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text-wrapper"><span class="van-tab__text van-tab__text--ellipsis"></span>
+        <div class="van-info van-info--dot"></div>
+        </span></div>
       <div class="van-tabs__line"></div>
     </div>
   </div>
@@ -118,7 +120,9 @@ exports[`info prop 1`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
     <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-      <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text"><div class="van-info">10</div></span></div>
+      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text-wrapper"><span class="van-tab__text van-tab__text--ellipsis"></span>
+        <div class="van-info">10</div>
+        </span></div>
       <div class="van-tabs__line"></div>
     </div>
   </div>
@@ -134,9 +138,9 @@ exports[`lazy render 1`] = `
     <div class="van-sticky">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #ee0a24;">
-          <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">title1<!----></span></div>
-          <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">title2<!----></span></div>
-          <div role="tab" class="van-tab van-tab--disabled van-ellipsis"><span class="van-tab__text">title3<!----></span></div>
+          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
+          <div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
           <div class="van-tabs__line" style="background-color: rgb(238, 10, 36);"></div>
         </div>
       </div>
@@ -160,9 +164,9 @@ exports[`lazy render 2`] = `
     <div class="van-sticky">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #ee0a24;">
-          <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">title1<!----></span></div>
-          <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">title2<!----></span></div>
-          <div role="tab" class="van-tab van-tab--disabled van-ellipsis"><span class="van-tab__text">title3<!----></span></div>
+          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
+          <div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
           <div class="van-tabs__line" style="background-color: rgb(238, 10, 36); width: 2px; transform: translateX(0px) translateX(-50%);"></div>
         </div>
       </div>
@@ -180,9 +184,9 @@ exports[`name prop 1`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
     <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-      <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">title1<!----></span></div>
-      <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">title2<!----></span></div>
-      <div role="tab" class="van-tab van-tab--disabled van-ellipsis"><span class="van-tab__text">title3<!----></span></div>
+      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
+      <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
+      <div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
       <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
     </div>
   </div>
@@ -203,9 +207,9 @@ exports[`render nav-left & nav-right slot 1`] = `
   <div>
     <div class="van-sticky">
       <div class="van-tabs__wrap van-hairline--top-bottom">
-        <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #ee0a24;">Nav Left<div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">title1<!----></span></div>
-          <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">title2<!----></span></div>
-          <div role="tab" class="van-tab van-tab--disabled van-ellipsis"><span class="van-tab__text">title3<!----></span></div>
+        <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #ee0a24;">Nav Left<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
+          <div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
           <div class="van-tabs__line" style="background-color: rgb(238, 10, 36);"></div>Nav Right
         </div>
       </div>
@@ -231,9 +235,9 @@ exports[`scrollspy 1`] = `
     <div class="van-sticky">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-          <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">title1<!----></span></div>
-          <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">title2<!----></span></div>
-          <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">title3<!----></span></div>
+          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
           <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
         </div>
       </div>
@@ -253,9 +257,9 @@ exports[`scrollspy 2`] = `
     <div class="van-sticky">
       <div class="van-tabs__wrap van-hairline--top-bottom">
         <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-          <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">title1<!----></span></div>
-          <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">title2<!----></span></div>
-          <div role="tab" class="van-tab van-tab--active van-ellipsis" aria-selected="true"><span class="van-tab__text">title3<!----></span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
+          <div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
           <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%); transition-duration: 0.3s;"></div>
         </div>
       </div>
@@ -273,9 +277,9 @@ exports[`swipe to switch tab 1`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
     <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-      <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">title1<!----></span></div>
-      <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">title2<!----></span></div>
-      <div role="tab" class="van-tab van-tab--disabled van-ellipsis"><span class="van-tab__text">title3<!----></span></div>
+      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
+      <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
+      <div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
       <div class="van-tabs__line"></div>
     </div>
   </div>
@@ -295,9 +299,9 @@ exports[`swipe to switch tab 2`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
     <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-      <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">title1<!----></span></div>
-      <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">title2<!----></span></div>
-      <div role="tab" class="van-tab van-tab--disabled van-ellipsis"><span class="van-tab__text">title3<!----></span></div>
+      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
+      <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
+      <div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
       <div class="van-tabs__line"></div>
     </div>
   </div>
@@ -315,9 +319,9 @@ exports[`swipe to switch tab 3`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
     <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-      <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">title1<!----></span></div>
-      <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">title2<!----></span></div>
-      <div role="tab" class="van-tab van-tab--disabled van-ellipsis"><span class="van-tab__text">title3<!----></span></div>
+      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
+      <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
+      <div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
       <div class="van-tabs__line"></div>
     </div>
   </div>
diff --git a/src/tab/test/__snapshots__/insert.spec.js.snap b/src/tab/test/__snapshots__/insert.spec.js.snap
index b94a0a83a..ce51d5a48 100644
--- a/src/tab/test/__snapshots__/insert.spec.js.snap
+++ b/src/tab/test/__snapshots__/insert.spec.js.snap
@@ -4,9 +4,9 @@ exports[`insert tab dynamically 1`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
     <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-      <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">1<!----></span></div>
-      <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">2<!----></span></div>
-      <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">3<!----></span></div>
+      <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">1</span></div>
+      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">2</span></div>
+      <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">3</span></div>
       <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
     </div>
   </div>
@@ -26,9 +26,9 @@ exports[`insert tab with child component 1`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap van-hairline--top-bottom">
     <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-      <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text">1<!----></span></div>
-      <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">2<!----></span></div>
-      <div role="tab" class="van-tab van-ellipsis"><span class="van-tab__text">3<!----></span></div>
+      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">1</span></div>
+      <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">2</span></div>
+      <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">3</span></div>
       <div class="van-tabs__line"></div>
     </div>
   </div>
diff --git a/src/tabs/Title.js b/src/tabs/Title.js
index aa55aba1d..0f3e481fc 100644
--- a/src/tabs/Title.js
+++ b/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>
     );
   },
diff --git a/src/tabs/index.less b/src/tabs/index.less
index d4d645dc5..e3e2912da 100644
--- a/src/tabs/index.less
+++ b/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 {