diff --git a/src/packages/tabpane/tabpane.taro.tsx b/src/packages/tabpane/tabpane.taro.tsx
index 8ed23089a7..3fdcbfc0da 100644
--- a/src/packages/tabpane/tabpane.taro.tsx
+++ b/src/packages/tabpane/tabpane.taro.tsx
@@ -38,7 +38,5 @@ export const TabPane: FunctionComponent<
     className
   )
 
-  return children ? (
-    <View className={classes}>{!disabled && children}</View>
-  ) : null
+  return children && <View className={classes}>{!disabled && children}</View>
 }
diff --git a/src/packages/tabpane/tabpane.tsx b/src/packages/tabpane/tabpane.tsx
index 45c000ae0f..2759b54435 100644
--- a/src/packages/tabpane/tabpane.tsx
+++ b/src/packages/tabpane/tabpane.tsx
@@ -37,7 +37,5 @@ export const TabPane: FunctionComponent<
     className
   )
 
-  return children ? (
-    <div className={classes}>{!disabled && children}</div>
-  ) : null
+  return children && <div className={classes}>{!disabled && children}</div>
 }
diff --git a/src/packages/tabs/demos/h5/demo1.tsx b/src/packages/tabs/demos/h5/demo1.tsx
index bf228781a8..883c1a1001 100644
--- a/src/packages/tabs/demos/h5/demo1.tsx
+++ b/src/packages/tabs/demos/h5/demo1.tsx
@@ -11,7 +11,7 @@ const Demo1 = () => {
           setTabvalue(value)
         }}
       >
-        <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+        <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
       </Tabs>
diff --git a/src/packages/tabs/demos/h5/demo10.tsx b/src/packages/tabs/demos/h5/demo10.tsx
index aad0e8cea9..12f782dcf4 100644
--- a/src/packages/tabs/demos/h5/demo10.tsx
+++ b/src/packages/tabs/demos/h5/demo10.tsx
@@ -13,7 +13,7 @@ const Demo10 = () => {
           setTabvalue(value)
         }}
       >
-        <Tabs.TabPane title="Tab 1"> Tab 1</Tabs.TabPane>
+        <Tabs.TabPane title="Tab longitem"> Tab longitem</Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
       </Tabs>
diff --git a/src/packages/tabs/demos/h5/demo11.tsx b/src/packages/tabs/demos/h5/demo11.tsx
index 192332b2ba..c08c25007b 100644
--- a/src/packages/tabs/demos/h5/demo11.tsx
+++ b/src/packages/tabs/demos/h5/demo11.tsx
@@ -11,8 +11,8 @@ const Demo11 = () => {
           setTabvalue(value)
         }}
       >
-        <Tabs.TabPane title="Tab 1" value="0">
-          Tab 1
+        <Tabs.TabPane title="Tab longitem" value="0">
+          Tab longitem
         </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2" value="1" disabled>
           Tab 2
diff --git a/src/packages/tabs/demos/h5/demo12.tsx b/src/packages/tabs/demos/h5/demo12.tsx
index 2090a35f27..c5f1168519 100644
--- a/src/packages/tabs/demos/h5/demo12.tsx
+++ b/src/packages/tabs/demos/h5/demo12.tsx
@@ -14,7 +14,7 @@ const Demo12 = () => {
           setTabIndex(page)
         }}
       >
-        <Tabs.TabPane title="Tab 1" />
+        <Tabs.TabPane title="Tab longitem" />
         <Tabs.TabPane title="Tab 2" />
         <Tabs.TabPane title="Tab 3" />
       </Tabs>
@@ -28,7 +28,7 @@ const Demo12 = () => {
         }}
       >
         <Swiper.Item>
-          <div style={style}>Tab 1</div>
+          <div style={style}>Tab longitem</div>
         </Swiper.Item>
         <Swiper.Item>
           <div style={style}>Tab 2</div>
diff --git a/src/packages/tabs/demos/h5/demo13.tsx b/src/packages/tabs/demos/h5/demo13.tsx
index 133f026ebd..2bb7f98be2 100644
--- a/src/packages/tabs/demos/h5/demo13.tsx
+++ b/src/packages/tabs/demos/h5/demo13.tsx
@@ -13,16 +13,16 @@ const Demo13 = () => {
           setTabvalue(value)
         }}
       >
-        <Tabs.TabPane title="Tab 1" value="0">
-          <p>Tab 1</p>
-          <p>Tab 1</p>
-          <p>Tab 1</p>
-          <p>Tab 1</p>
-          <p>Tab 1</p>
-          <p>Tab 1</p>
-          <p>Tab 1</p>
-          <p>Tab 1</p>
-          <p>Tab 1</p>
+        <Tabs.TabPane title="Tab longitem" value="0">
+          <p>Tab longitem</p>
+          <p>Tab longitem</p>
+          <p>Tab longitem</p>
+          <p>Tab longitem</p>
+          <p>Tab longitem</p>
+          <p>Tab longitem</p>
+          <p>Tab longitem</p>
+          <p>Tab longitem</p>
+          <p>Tab longitem</p>
         </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2" value="1">
           <p>Tab 2</p>
diff --git a/src/packages/tabs/demos/h5/demo14.tsx b/src/packages/tabs/demos/h5/demo14.tsx
index 63ad8f3db1..88c81d7056 100644
--- a/src/packages/tabs/demos/h5/demo14.tsx
+++ b/src/packages/tabs/demos/h5/demo14.tsx
@@ -12,11 +12,11 @@ const Demo14 = () => {
           setTabvalue(value)
         }}
       >
-        <Tabs.TabPane title="Tab 1">
-          <p>Tab 1</p>
-          <p>Tab 1</p>
-          <p>Tab 1</p>
-          <p>Tab 1</p>
+        <Tabs.TabPane title="Tab longitem">
+          <p>Tab longitem</p>
+          <p>Tab longitem</p>
+          <p>Tab longitem</p>
+          <p>Tab longitem</p>
         </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
diff --git a/src/packages/tabs/demos/h5/demo2.tsx b/src/packages/tabs/demos/h5/demo2.tsx
index d6effd9d25..3583358aef 100644
--- a/src/packages/tabs/demos/h5/demo2.tsx
+++ b/src/packages/tabs/demos/h5/demo2.tsx
@@ -12,7 +12,7 @@ const Demo2 = () => {
         }}
         activeType="smile"
       >
-        <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+        <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
       </Tabs>
diff --git a/src/packages/tabs/demos/h5/demo20.tsx b/src/packages/tabs/demos/h5/demo20.tsx
index d8a7199037..949117c1d5 100644
--- a/src/packages/tabs/demos/h5/demo20.tsx
+++ b/src/packages/tabs/demos/h5/demo20.tsx
@@ -13,7 +13,7 @@ const Demo20 = () => {
         }}
         direction="vertical"
       >
-        <Tabs.TabPane title="Tab 1">
+        <Tabs.TabPane title="Tab longitem">
           <Tabs
             value={tabvalue1}
             onChange={(value) => {
@@ -21,7 +21,7 @@ const Demo20 = () => {
             }}
             direction="horizontal"
           >
-            <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+            <Tabs.TabPane title="Tab longitem"> Tab 1 </Tabs.TabPane>
             <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
             <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
           </Tabs>
diff --git a/src/packages/tabs/demos/h5/demo21.tsx b/src/packages/tabs/demos/h5/demo21.tsx
index fb4ce582bf..781143188f 100644
--- a/src/packages/tabs/demos/h5/demo21.tsx
+++ b/src/packages/tabs/demos/h5/demo21.tsx
@@ -13,7 +13,7 @@ const Demo21 = () => {
         }}
         autoHeight
       >
-        <Tabs.TabPane title="Tab 1">
+        <Tabs.TabPane title="Tab longitem">
           <Tabs
             value={tabvalue1}
             onChange={(value) => {
@@ -21,7 +21,7 @@ const Demo21 = () => {
             }}
             direction="vertical"
           >
-            <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+            <Tabs.TabPane title="Tab longitem"> Tab 1 </Tabs.TabPane>
             <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
             <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
           </Tabs>
diff --git a/src/packages/tabs/demos/h5/demo22.tsx b/src/packages/tabs/demos/h5/demo22.tsx
index 597a8b711a..a06e85e072 100644
--- a/src/packages/tabs/demos/h5/demo22.tsx
+++ b/src/packages/tabs/demos/h5/demo22.tsx
@@ -13,7 +13,7 @@ const Demo22 = () => {
         }}
         style={{ '--nutui-tabs-titles-font-size': '20px' }}
       >
-        <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+        <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
       </Tabs>
@@ -24,7 +24,7 @@ const Demo22 = () => {
         }}
         style={{ '--nutui-tabs-titles-font-size': '12px' }}
       >
-        <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+        <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
       </Tabs>
diff --git a/src/packages/tabs/demos/h5/demo3.tsx b/src/packages/tabs/demos/h5/demo3.tsx
index 25dfb9c7e3..2032bed6e6 100644
--- a/src/packages/tabs/demos/h5/demo3.tsx
+++ b/src/packages/tabs/demos/h5/demo3.tsx
@@ -12,7 +12,7 @@ const Demo3 = () => {
         }}
         activeType="simple"
       >
-        <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+        <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
       </Tabs>
diff --git a/src/packages/tabs/demos/h5/demo4.tsx b/src/packages/tabs/demos/h5/demo4.tsx
index fee79f2f56..aaca44d0ea 100644
--- a/src/packages/tabs/demos/h5/demo4.tsx
+++ b/src/packages/tabs/demos/h5/demo4.tsx
@@ -12,7 +12,7 @@ const Demo4 = () => {
         }}
         activeType="card"
       >
-        <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+        <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
       </Tabs>
diff --git a/src/packages/tabs/demos/h5/demo5.tsx b/src/packages/tabs/demos/h5/demo5.tsx
index f4834a5111..9277fcf0fd 100644
--- a/src/packages/tabs/demos/h5/demo5.tsx
+++ b/src/packages/tabs/demos/h5/demo5.tsx
@@ -12,7 +12,7 @@ const Demo5 = () => {
         }}
         activeType="button"
       >
-        <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+        <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
       </Tabs>
diff --git a/src/packages/tabs/demos/h5/demo6.tsx b/src/packages/tabs/demos/h5/demo6.tsx
index 2db225a416..c219aca57d 100644
--- a/src/packages/tabs/demos/h5/demo6.tsx
+++ b/src/packages/tabs/demos/h5/demo6.tsx
@@ -12,7 +12,7 @@ const Demo6 = () => {
         }}
         activeType="divider"
       >
-        <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+        <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
       </Tabs>
diff --git a/src/packages/tabs/demos/h5/demo7.tsx b/src/packages/tabs/demos/h5/demo7.tsx
index 57d716eef3..a13e300f8e 100644
--- a/src/packages/tabs/demos/h5/demo7.tsx
+++ b/src/packages/tabs/demos/h5/demo7.tsx
@@ -12,7 +12,7 @@ const Demo7 = () => {
           setTabvalue(value)
         }}
       >
-        <Tabs.TabPane title="Tab 1"> Tab 1</Tabs.TabPane>
+        <Tabs.TabPane title="Tab longitem"> Tab longitem</Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
       </Tabs>
diff --git a/src/packages/tabs/demos/h5/demo8.tsx b/src/packages/tabs/demos/h5/demo8.tsx
index 63a2a0ef31..7b28f4963c 100644
--- a/src/packages/tabs/demos/h5/demo8.tsx
+++ b/src/packages/tabs/demos/h5/demo8.tsx
@@ -13,7 +13,7 @@ const Demo8 = () => {
           setTabvalue(value)
         }}
       >
-        <Tabs.TabPane title="Tab 1"> Tab 1</Tabs.TabPane>
+        <Tabs.TabPane title="Tab longitem"> Tab longitem</Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
       </Tabs>
diff --git a/src/packages/tabs/demos/h5/demo9.tsx b/src/packages/tabs/demos/h5/demo9.tsx
index 0ec02ebfc9..c069bf1b5b 100644
--- a/src/packages/tabs/demos/h5/demo9.tsx
+++ b/src/packages/tabs/demos/h5/demo9.tsx
@@ -13,7 +13,7 @@ const Demo9 = () => {
           setTabvalue(value)
         }}
       >
-        <Tabs.TabPane title="Tab 1"> Tab 1</Tabs.TabPane>
+        <Tabs.TabPane title="Tab longitem"> Tab longitem</Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
       </Tabs>
diff --git a/src/packages/tabs/demos/taro/demo1.tsx b/src/packages/tabs/demos/taro/demo1.tsx
index b6cfd987d6..5758605f19 100644
--- a/src/packages/tabs/demos/taro/demo1.tsx
+++ b/src/packages/tabs/demos/taro/demo1.tsx
@@ -10,7 +10,7 @@ const Demo1 = () => {
         setTabvalue(value)
       }}
     >
-      <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+      <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
       <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
       <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
     </Tabs>
diff --git a/src/packages/tabs/demos/taro/demo10.tsx b/src/packages/tabs/demos/taro/demo10.tsx
index bf03ee04d9..b2952ff692 100644
--- a/src/packages/tabs/demos/taro/demo10.tsx
+++ b/src/packages/tabs/demos/taro/demo10.tsx
@@ -13,7 +13,7 @@ const Demo10 = () => {
         }}
         align="left"
       >
-        <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+        <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
       </Tabs>
diff --git a/src/packages/tabs/demos/taro/demo11.tsx b/src/packages/tabs/demos/taro/demo11.tsx
index b24a84a74c..2eff338649 100644
--- a/src/packages/tabs/demos/taro/demo11.tsx
+++ b/src/packages/tabs/demos/taro/demo11.tsx
@@ -11,8 +11,8 @@ const Demo11 = () => {
           setTabvalue(value)
         }}
       >
-        <Tabs.TabPane title="Tab 1" value="0">
-          Tab 1
+        <Tabs.TabPane title="Tab longitem" value="0">
+          Tab longitem
         </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2" value="1" disabled>
           Tab 2
diff --git a/src/packages/tabs/demos/taro/demo12.tsx b/src/packages/tabs/demos/taro/demo12.tsx
index 38f6ce8e18..6c76181ff8 100644
--- a/src/packages/tabs/demos/taro/demo12.tsx
+++ b/src/packages/tabs/demos/taro/demo12.tsx
@@ -16,7 +16,7 @@ const Demo12 = () => {
           setTabIndex(page)
         }}
       >
-        <Tabs.TabPane title="Tab 1" />
+        <Tabs.TabPane title="Tab longitem" />
         <Tabs.TabPane title="Tab 2" />
         <Tabs.TabPane title="Tab 3" />
       </Tabs>
@@ -30,7 +30,7 @@ const Demo12 = () => {
         }}
       >
         <Swiper.Item>
-          <View style={contentStyle}>Tab 1</View>
+          <View style={contentStyle}>Tab longitem</View>
         </Swiper.Item>
         <Swiper.Item>
           <View style={contentStyle}>Tab 2</View>
diff --git a/src/packages/tabs/demos/taro/demo13.tsx b/src/packages/tabs/demos/taro/demo13.tsx
index 3bd2a2b201..66387ce0ba 100644
--- a/src/packages/tabs/demos/taro/demo13.tsx
+++ b/src/packages/tabs/demos/taro/demo13.tsx
@@ -14,11 +14,11 @@ const Demo13 = () => {
           setTabvalue(value)
         }}
       >
-        <Tabs.TabPane title="Tab 1">
+        <Tabs.TabPane title="Tab longitem">
           {Array(8)
             .fill(null)
             .map((_, index) => (
-              <View key={index}>Tab 1</View>
+              <View key={index}>Tab longitem</View>
             ))}
         </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2">
diff --git a/src/packages/tabs/demos/taro/demo14.tsx b/src/packages/tabs/demos/taro/demo14.tsx
index 5997a4d5a2..d82d4f7972 100644
--- a/src/packages/tabs/demos/taro/demo14.tsx
+++ b/src/packages/tabs/demos/taro/demo14.tsx
@@ -14,11 +14,11 @@ const Demo14 = () => {
           setTabvalue(value)
         }}
       >
-        <Tabs.TabPane title="Tab 1">
+        <Tabs.TabPane title="Tab longitem">
           {Array(8)
             .fill(null)
             .map((_, index) => (
-              <View key={index}>Tab 1</View>
+              <View key={index}>Tab longitem</View>
             ))}
         </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
diff --git a/src/packages/tabs/demos/taro/demo2.tsx b/src/packages/tabs/demos/taro/demo2.tsx
index 7a926f283f..d6a98d0935 100644
--- a/src/packages/tabs/demos/taro/demo2.tsx
+++ b/src/packages/tabs/demos/taro/demo2.tsx
@@ -11,7 +11,7 @@ const Demo2 = () => {
       }}
       activeType="smile"
     >
-      <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+      <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
       <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
       <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
     </Tabs>
diff --git a/src/packages/tabs/demos/taro/demo20.tsx b/src/packages/tabs/demos/taro/demo20.tsx
index 5f906bb8e6..a1085c1f2b 100644
--- a/src/packages/tabs/demos/taro/demo20.tsx
+++ b/src/packages/tabs/demos/taro/demo20.tsx
@@ -14,7 +14,7 @@ const Demo20 = () => {
         }}
         direction="vertical"
       >
-        <Tabs.TabPane title="Tab 1">
+        <Tabs.TabPane title="Tab longitem">
           <Tabs
             value={tabvalue1}
             onChange={(value) => {
@@ -22,7 +22,7 @@ const Demo20 = () => {
             }}
             direction="horizontal"
           >
-            <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+            <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
             <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
             <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
           </Tabs>
diff --git a/src/packages/tabs/demos/taro/demo21.tsx b/src/packages/tabs/demos/taro/demo21.tsx
index dc648b01b4..0cb1029ab7 100644
--- a/src/packages/tabs/demos/taro/demo21.tsx
+++ b/src/packages/tabs/demos/taro/demo21.tsx
@@ -13,7 +13,7 @@ const Demo21 = () => {
         }}
         autoHeight
       >
-        <Tabs.TabPane title="Tab 1">
+        <Tabs.TabPane title="Tab longitem">
           <Tabs
             value={tabvalue1}
             onChange={(value) => {
@@ -21,7 +21,7 @@ const Demo21 = () => {
             }}
             direction="vertical"
           >
-            <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+            <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
             <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
             <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
           </Tabs>
diff --git a/src/packages/tabs/demos/taro/demo22.tsx b/src/packages/tabs/demos/taro/demo22.tsx
index 42033f9df6..88399e432d 100644
--- a/src/packages/tabs/demos/taro/demo22.tsx
+++ b/src/packages/tabs/demos/taro/demo22.tsx
@@ -13,7 +13,7 @@ const Demo22 = () => {
         }}
         style={{ '--nutui-tabs-titles-font-size': '20px' }}
       >
-        <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+        <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
       </Tabs>
@@ -24,7 +24,7 @@ const Demo22 = () => {
         }}
         style={{ '--nutui-tabs-titles-font-size': '12px' }}
       >
-        <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+        <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
       </Tabs>
diff --git a/src/packages/tabs/demos/taro/demo3.tsx b/src/packages/tabs/demos/taro/demo3.tsx
index 5047c16d80..d68bf9d91d 100644
--- a/src/packages/tabs/demos/taro/demo3.tsx
+++ b/src/packages/tabs/demos/taro/demo3.tsx
@@ -11,7 +11,7 @@ const Demo3 = () => {
       }}
       activeType="simple"
     >
-      <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+      <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
       <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
       <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
     </Tabs>
diff --git a/src/packages/tabs/demos/taro/demo4.tsx b/src/packages/tabs/demos/taro/demo4.tsx
index 7fae3ebf8e..6c1a3df1ff 100644
--- a/src/packages/tabs/demos/taro/demo4.tsx
+++ b/src/packages/tabs/demos/taro/demo4.tsx
@@ -11,7 +11,7 @@ const Demo4 = () => {
       }}
       activeType="card"
     >
-      <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+      <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
       <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
       <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
     </Tabs>
diff --git a/src/packages/tabs/demos/taro/demo5.tsx b/src/packages/tabs/demos/taro/demo5.tsx
index 507824786d..d116fe27d4 100644
--- a/src/packages/tabs/demos/taro/demo5.tsx
+++ b/src/packages/tabs/demos/taro/demo5.tsx
@@ -11,7 +11,7 @@ const Demo5 = () => {
       }}
       activeType="button"
     >
-      <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+      <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
       <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
       <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
     </Tabs>
diff --git a/src/packages/tabs/demos/taro/demo6.tsx b/src/packages/tabs/demos/taro/demo6.tsx
index 9f23d646d9..e017cd5d7a 100644
--- a/src/packages/tabs/demos/taro/demo6.tsx
+++ b/src/packages/tabs/demos/taro/demo6.tsx
@@ -11,7 +11,7 @@ const Demo6 = () => {
       }}
       activeType="divider"
     >
-      <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+      <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
       <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
       <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
     </Tabs>
diff --git a/src/packages/tabs/demos/taro/demo7.tsx b/src/packages/tabs/demos/taro/demo7.tsx
index edf764e65e..6028710cb1 100644
--- a/src/packages/tabs/demos/taro/demo7.tsx
+++ b/src/packages/tabs/demos/taro/demo7.tsx
@@ -11,7 +11,7 @@ const Demo7 = () => {
       }}
       align="left"
     >
-      <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+      <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
       <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
       <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
     </Tabs>
diff --git a/src/packages/tabs/demos/taro/demo8.tsx b/src/packages/tabs/demos/taro/demo8.tsx
index bee10004af..580f732675 100644
--- a/src/packages/tabs/demos/taro/demo8.tsx
+++ b/src/packages/tabs/demos/taro/demo8.tsx
@@ -12,7 +12,7 @@ const Demo8 = () => {
       }}
       align="left"
     >
-      <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+      <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
       <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
       <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
     </Tabs>
diff --git a/src/packages/tabs/demos/taro/demo9.tsx b/src/packages/tabs/demos/taro/demo9.tsx
index 08b9b30cc4..088313af54 100644
--- a/src/packages/tabs/demos/taro/demo9.tsx
+++ b/src/packages/tabs/demos/taro/demo9.tsx
@@ -13,7 +13,7 @@ const Demo9 = () => {
         }}
         align="left"
       >
-        <Tabs.TabPane title="Tab 1"> Tab 1 </Tabs.TabPane>
+        <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
         <Tabs.TabPane title="Tab 3"> Tab 3 </Tabs.TabPane>
       </Tabs>
diff --git a/src/packages/tabs/tabs.scss b/src/packages/tabs/tabs.scss
index 509bbdbdba..ec7ba1c994 100644
--- a/src/packages/tabs/tabs.scss
+++ b/src/packages/tabs/tabs.scss
@@ -152,11 +152,7 @@
   }
 
   &-card {
-    padding: 0;
-    // background-color: $color-default-light;
-
     .nut-tabs-titles-item {
-      padding: 0;
       &-active {
         font-weight: $font-weight-bold;
         background-color: $white;
@@ -190,11 +186,9 @@
   }
 
   &-divider {
-    padding: 0;
     border-bottom: 1px solid $color-border;
 
     .nut-tabs-titles-item {
-      padding: 0;
       position: relative;
 
       &::after {
@@ -219,9 +213,10 @@
 
 .nut-tabs-vertical {
   .nut-tabs-ellipsis {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
+    white-space: break-spaces;
+    padding-left: 6px;
+    width: 90px;
+    line-height: $font-size-base;
   }
 
   .nut-tabs-titles {
diff --git a/src/packages/tabs/tabs.taro.tsx b/src/packages/tabs/tabs.taro.tsx
index 0bd1473574..8ba48cb7f7 100644
--- a/src/packages/tabs/tabs.taro.tsx
+++ b/src/packages/tabs/tabs.taro.tsx
@@ -67,16 +67,13 @@ export const Tabs: FunctionComponent<Partial<TabsProps>> & {
     value: outerValue,
     defaultValue: outerDefaultValue,
     ...rest
-  } = {
-    ...defaultProps,
-    ...props,
-  }
+  } = { ...defaultProps, ...props }
+
   const uuid = useUuid()
 
   const [value, setValue] = usePropsValue<string | number>({
     value: outerValue,
     defaultValue: outerDefaultValue,
-    finalValue: 0,
     onChange,
   })
 
@@ -84,9 +81,9 @@ export const Tabs: FunctionComponent<Partial<TabsProps>> & {
 
   const getTitles = () => {
     const titles: TabsTitle[] = []
-    React.Children.forEach(children, (child: any, idx) => {
+    React.Children.forEach(children, (child, idx) => {
       if (React.isValidElement(child)) {
-        const props: any = child?.props
+        const { props } = child
         if (props?.title || props?.value) {
           titles.push({
             title: props.title,
@@ -115,6 +112,7 @@ export const Tabs: FunctionComponent<Partial<TabsProps>> & {
       forceUpdate()
     }
   }, [children])
+
   const classes = classNames(
     classPrefix,
     `${classPrefix}-${direction}`,
@@ -125,10 +123,6 @@ export const Tabs: FunctionComponent<Partial<TabsProps>> & {
     [`${classPrefix}-titles-${align}`]: align,
   })
 
-  const tabsActiveStyle = {
-    color: activeType === 'smile' ? activeColor : '',
-    background: activeType === 'line' ? activeColor : '',
-  }
   const getRect = (selector: string) => {
     return new Promise((resolve) => {
       createSelectorQuery()
@@ -160,8 +154,6 @@ export const Tabs: FunctionComponent<Partial<TabsProps>> & {
     width: number
   }
   const scrollWithAnimation = useRef(false)
-  const navRectRef = useRef<any>()
-  const titleRectRef = useRef<RectItem[]>([])
   const [scrollLeft, setScrollLeft] = useState(0)
   const [scrollTop, setScrollTop] = useState(0)
   const scrollDirection = (
@@ -172,16 +164,10 @@ export const Tabs: FunctionComponent<Partial<TabsProps>> & {
     const frames = 1
 
     function animate() {
-      if (direction === 'horizontal') {
-        setScrollLeft(to)
-      } else {
-        setScrollTop(to)
-      }
-      if (++count < frames) {
-        raf(animate)
-      }
+      if (direction === 'horizontal') setScrollLeft(to)
+      else setScrollTop(to)
+      if (++count < frames) raf(animate)
     }
-
     animate()
   }
   const scrollIntoView = (index: number) => {
@@ -190,10 +176,7 @@ export const Tabs: FunctionComponent<Partial<TabsProps>> & {
         getRect(`#nut-tabs-titles-${name || uuid} .nut-tabs-list`),
         getAllRect(`#nut-tabs-titles-${name || uuid} .nut-tabs-titles-item`),
       ]).then(([navRect, titleRects]: any) => {
-        navRectRef.current = navRect
-        titleRectRef.current = titleRects
-        // @ts-ignore
-        const titleRect: RectItem = titleRectRef.current[index]
+        const titleRect = titleRects[index]
         if (!titleRect) return
 
         let to = 0
@@ -201,12 +184,12 @@ export const Tabs: FunctionComponent<Partial<TabsProps>> & {
           const top = titleRects
             .slice(0, index)
             .reduce((prev: number, curr: RectItem) => prev + curr.height, 0)
-          to = top - (navRectRef.current.height - titleRect.height) / 2
+          to = top - (navRect.height - titleRect.height) / 2
         } else {
           const left = titleRects
             .slice(0, index)
             .reduce((prev: number, curr: RectItem) => prev + curr.width, 0)
-          to = left - (navRectRef.current.width - titleRect.width) / 2
+          to = left - (navRect.width - titleRect.width) / 2
           // to < 0 说明不需要进行滚动，页面元素已全部显示出来
           if (to < 0) return
           to = rtl ? -to : to
@@ -214,7 +197,6 @@ export const Tabs: FunctionComponent<Partial<TabsProps>> & {
         nextTick(() => {
           scrollWithAnimation.current = true
         })
-
         scrollDirection(to, direction)
       })
     })
@@ -229,7 +211,7 @@ export const Tabs: FunctionComponent<Partial<TabsProps>> & {
       transform:
         direction === 'horizontal'
           ? `translate3d(${rtl ? '' : '-'}${index * 100}%, 0, 0)`
-          : `translate3d( 0,-${index * 100}%, 0)`,
+          : `translate3d( 0, -${index * 100}%, 0)`,
       transitionDuration: `${duration}ms`,
     }
   }
@@ -242,12 +224,11 @@ export const Tabs: FunctionComponent<Partial<TabsProps>> & {
     scrollIntoView(index)
   }, [value])
 
-  const tabChange = (item: TabsTitle, index: number) => {
+  const tabChange = (item: TabsTitle) => {
     onClick && onClick(item.value)
-    if (item.disabled) {
-      return
+    if (!item.disabled) {
+      setValue(item.value)
     }
-    setValue(item.value)
   }
 
   return (
@@ -264,7 +245,7 @@ export const Tabs: FunctionComponent<Partial<TabsProps>> & {
         }
         id={`nut-tabs-titles-${name || uuid}`}
         className={classesTitle}
-        style={{ ...tabStyle }}
+        style={tabStyle}
       >
         <View className="nut-tabs-list">
           {!!title && typeof title === 'function'
@@ -272,46 +253,41 @@ export const Tabs: FunctionComponent<Partial<TabsProps>> & {
             : titles.current.map((item, index) => {
                 return (
                   <View
+                    key={item.value}
                     ref={(ref: HTMLDivElement) =>
                       titleItemsRef.current.push(ref)
                     }
                     id={`scrollIntoView${index}`}
-                    onClick={(e) => {
-                      tabChange(item, index)
-                    }}
+                    onClick={() => tabChange(item)}
                     className={classNames(`${classPrefix}-titles-item`, {
                       [`nut-tabs-titles-item-active`]:
                         !item.disabled && String(item.value) === String(value),
                       [`nut-tabs-titles-item-disabled`]: item.disabled,
                       [`nut-tabs-titles-item-${align}`]: align,
                     })}
-                    key={item.value}
                   >
                     {activeType === 'line' && (
                       <View
                         className={classNames(
                           `${classPrefix}-titles-item-line`,
-                          {
-                            [`${classPrefix}-titles-item-line-${direction}`]:
-                              true,
-                          }
+                          `${classPrefix}-titles-item-line-${direction}`
                         )}
-                        style={tabsActiveStyle}
+                        style={{ background: activeColor }}
                       />
                     )}
                     {activeType === 'smile' && (
-                      <View
-                        className={`${classPrefix}-titles-item-smile`}
-                        style={tabsActiveStyle}
-                      >
+                      <View className={`${classPrefix}-titles-item-smile`}>
                         <JoySmile color={activeColor} />
                       </View>
                     )}
                     <View
                       className={classNames(
-                        `${classPrefix}-ellipsis`,
+                        {
+                          [`${classPrefix}-ellipsis`]: direction === 'vertical',
+                        },
                         `${classPrefix}-titles-item-text`
                       )}
+                      style={{ color: activeColor }}
                     >
                       {item.title}
                     </View>
@@ -323,25 +299,15 @@ export const Tabs: FunctionComponent<Partial<TabsProps>> & {
       <View className={`${classPrefix}-content-wrap`}>
         <View className={`${classPrefix}-content`} style={getContentStyle()}>
           {React.Children.map(children, (child, idx) => {
-            if (!React.isValidElement(child)) {
-              return null
-            }
-
-            let childProps = {
+            if (!React.isValidElement(child)) return null
+            return React.cloneElement(child, {
               ...child.props,
               active: value === child.props.value,
-            }
-
-            if (
-              String(value) !== String(child.props.value || idx) &&
-              autoHeight
-            ) {
-              childProps = {
-                ...childProps,
-                autoHeightClassName: 'inactive',
-              }
-            }
-            return React.cloneElement(child, childProps)
+              autoHeightClassName:
+                autoHeight && String(value) !== String(child.props.value || idx)
+                  ? 'inactive'
+                  : '',
+            })
           })}
         </View>
       </View>
diff --git a/src/packages/tabs/tabs.tsx b/src/packages/tabs/tabs.tsx
index 103cbdb4a8..8216127caf 100644
--- a/src/packages/tabs/tabs.tsx
+++ b/src/packages/tabs/tabs.tsx
@@ -42,6 +42,7 @@ const defaultProps = {
 } as TabsProps
 
 const classPrefix = 'nut-tabs'
+
 export const Tabs: FunctionComponent<Partial<TabsProps>> & {
   TabPane: typeof TabPane
 } = (props) => {
@@ -62,52 +63,43 @@ export const Tabs: FunctionComponent<Partial<TabsProps>> & {
     value: outerValue,
     defaultValue: outerDefaultValue,
     ...rest
-  } = {
-    ...defaultProps,
-    ...props,
-  }
+  } = { ...defaultProps, ...props }
 
   const [value, setValue] = usePropsValue<string | number>({
     value: outerValue,
     defaultValue: outerDefaultValue,
-    finalValue: 0,
     onChange,
   })
+
   const titleItemsRef = useRef<HTMLDivElement[]>([])
   const navRef = useRef<HTMLDivElement>(null)
+
   const scrollDirection = (
-    nav: any,
+    nav: HTMLDivElement,
     to: number,
-    duration: number,
-    direction?: 'horizontal' | 'vertical'
+    duration: number
   ) => {
-    let count = 0
     const from = direction === 'horizontal' ? nav.scrollLeft : nav.scrollTop
     const frames = duration === 0 ? 1 : Math.round((duration * 1000) / 16)
+    let count = 0
 
-    function animate() {
-      if (direction === 'horizontal') {
-        nav.scrollLeft += (to - from) / frames
-      } else {
-        nav.scrollTop += (to - from) / frames
-      }
-
-      if (++count < frames) {
-        raf(animate)
-      }
+    const animate = () => {
+      if (direction === 'horizontal') nav.scrollLeft += (to - from) / frames
+      else nav.scrollTop += (to - from) / frames
+      if (++count < frames) raf(animate)
     }
     animate()
   }
+
   const scrollIntoView = (index: number, immediate?: boolean) => {
     const nav = navRef.current
     const titleItem = titleItemsRef.current
     const titlesLength = titles.current.length
-    const itemLength = titleItemsRef.current.length
+    const itemLength = titleItem.length
     if (!nav || !titleItem || !titleItem[itemLength - titlesLength + index]) {
       return
     }
     const title = titleItem[itemLength - titlesLength + index]
-
     let to = 0
     if (direction === 'vertical') {
       const runTop = title.offsetTop - nav.offsetTop + 10
@@ -115,14 +107,14 @@ export const Tabs: FunctionComponent<Partial<TabsProps>> & {
     } else {
       to = title.offsetLeft - (nav.offsetWidth - title.offsetWidth) / 2
     }
-    scrollDirection(nav, to, immediate ? 0 : 0.3, direction)
+    scrollDirection(nav, to, immediate ? 0 : 0.3)
   }
 
   const getTitles = () => {
     const titles: TabsTitle[] = []
-    React.Children.forEach(children, (child: any, idx) => {
+    React.Children.forEach(children, (child, idx) => {
       if (React.isValidElement(child)) {
-        const props: any = child?.props
+        const { props } = child
         if (props?.title || props?.value) {
           titles.push({
             title: props.title,
@@ -140,7 +132,6 @@ export const Tabs: FunctionComponent<Partial<TabsProps>> & {
     titles.current = getTitles()
     let current: string | number = ''
     titles.current.forEach((title) => {
-      // eslint-disable-next-line eqeqeq
       if (title.value === value) {
         current = value
       }
@@ -163,25 +154,19 @@ export const Tabs: FunctionComponent<Partial<TabsProps>> & {
     [`${classPrefix}-titles-${align}`]: align,
   })
 
-  const tabsActiveStyle = {
-    color: activeType === 'smile' ? activeColor : '',
-    background: activeType === 'line' ? activeColor : '',
-  }
   const getContentStyle = () => {
-    // eslint-disable-next-line eqeqeq
-    let index = titles.current.findIndex((t) => t.value == value)
+    let index = titles.current.findIndex((t) => t.value === value)
     index = index < 0 ? 0 : index
     return {
       transform:
         direction === 'horizontal'
           ? `translate3d(${rtl ? '' : '-'}${index * 100}%, 0, 0)`
-          : `translate3d( 0,-${index * 100}%, 0)`,
+          : `translate3d( 0, -${index * 100}%, 0)`,
       transitionDuration: `${duration}ms`,
     }
   }
   useEffect(() => {
-    // eslint-disable-next-line eqeqeq
-    let index = titles.current.findIndex((t) => t.value == value)
+    let index = titles.current.findIndex((t) => t.value === value)
     index = index < 0 ? 0 : index
     setTimeout(() => {
       scrollIntoView(index)
@@ -190,52 +175,50 @@ export const Tabs: FunctionComponent<Partial<TabsProps>> & {
 
   const tabChange = (item: TabsTitle) => {
     onClick && onClick(item.value)
-    if (item.disabled) {
-      return
+    if (!item.disabled) {
+      setValue(item.value)
     }
-    setValue(item.value)
   }
   return (
     <div className={classes} {...rest}>
-      <div className={classesTitle} style={{ ...tabStyle }} ref={navRef}>
+      <div className={classesTitle} style={tabStyle} ref={navRef}>
         {!!title && typeof title === 'function'
           ? title()
           : titles.current.map((item) => {
               return (
                 <div
-                  onClick={() => {
-                    tabChange(item)
-                  }}
+                  key={item.value}
+                  ref={(ref: HTMLDivElement) => titleItemsRef.current.push(ref)}
+                  onClick={() => tabChange(item)}
                   className={classNames(`${classPrefix}-titles-item`, {
                     [`nut-tabs-titles-item-active`]:
                       !item.disabled && String(item.value) === String(value),
                     [`nut-tabs-titles-item-disabled`]: item.disabled,
                     [`nut-tabs-titles-item-${align}`]: align,
                   })}
-                  ref={(ref: HTMLDivElement) => titleItemsRef.current.push(ref)}
-                  key={item.value}
                 >
                   {activeType === 'line' && (
                     <div
-                      className={classNames(`${classPrefix}-titles-item-line`, {
-                        [`${classPrefix}-titles-item-line-${direction}`]: true,
-                      })}
-                      style={tabsActiveStyle}
+                      className={classNames(
+                        `${classPrefix}-titles-item-line`,
+                        `${classPrefix}-titles-item-line-${direction}`
+                      )}
+                      style={{ background: activeColor }}
                     />
                   )}
                   {activeType === 'smile' && (
-                    <div
-                      className={`${classPrefix}-titles-item-smile`}
-                      style={tabsActiveStyle}
-                    >
+                    <div className={`${classPrefix}-titles-item-smile`}>
                       <JoySmile color={activeColor} width={40} height={20} />
                     </div>
                   )}
                   <div
                     className={classNames(
-                      `${classPrefix}-ellipsis`,
+                      {
+                        [`${classPrefix}-ellipsis`]: direction === 'vertical',
+                      },
                       `${classPrefix}-titles-item-text`
                     )}
+                    style={{ color: activeColor }}
                   >
                     {item.title}
                   </div>
@@ -246,25 +229,15 @@ export const Tabs: FunctionComponent<Partial<TabsProps>> & {
       <div className={`${classPrefix}-content-wrap`}>
         <div className={`${classPrefix}-content`} style={getContentStyle()}>
           {React.Children.map(children, (child, idx) => {
-            if (!React.isValidElement(child)) {
-              return null
-            }
-
-            let childProps = {
+            if (!React.isValidElement(child)) return null
+            return React.cloneElement(child, {
               ...child.props,
               active: value === child.props.value,
-            }
-
-            if (
-              String(value) !== String(child.props.value || idx) &&
-              autoHeight
-            ) {
-              childProps = {
-                ...childProps,
-                autoHeightClassName: 'inactive',
-              }
-            }
-            return React.cloneElement(child, childProps)
+              autoHeightClassName:
+                autoHeight && String(value) !== String(child.props.value || idx)
+                  ? 'inactive'
+                  : '',
+            })
           })}
         </div>
       </div>