diff --git a/src/components/DataActions/index.vue b/src/components/DataActions/index.vue
index 2071cf4686..caa5de075e 100644
--- a/src/components/DataActions/index.vue
+++ b/src/components/DataActions/index.vue
@@ -57,7 +57,7 @@
         @click="handleClick(action)"
       >
         <el-tooltip :content="action.tip" :disabled="!action.tip" :open-delay="500" placement="top">
-          <span>
+          <span :title="action.tip">
             <span v-if="action.icon && !action.icon.startsWith('el-')" style="vertical-align: initial">
               <i v-if="action.icon.startsWith('fa')" :class="'fa ' + action.icon" />
               <svg-icon v-else :icon-class="action.icon" />
@@ -249,10 +249,11 @@ $color-drop-menu-border: #e4e7ed;
   align-items: flex-end;
 
   .el-button {
-    display: flex;
-    align-items: center;
-    padding: 2px 6px;
+    padding: 2px 5px;
     color: $btn-text-color;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 
     * {
       vertical-align: baseline !important;
diff --git a/src/components/Form/DataForm/index.vue b/src/components/Form/DataForm/index.vue
index 7b71c4e298..bc980d1ef1 100644
--- a/src/components/Form/DataForm/index.vue
+++ b/src/components/Form/DataForm/index.vue
@@ -223,6 +223,10 @@ export default {
       line-height: 30px;
       color: var(--color-text-primary);
 
+      span {
+        display: unset;
+      }
+
       i {
         color: var(--color-icon-primary);
       }
diff --git a/src/views/dashboard/components/RankTable.vue b/src/views/dashboard/components/RankTable.vue
index 2550aa8090..9b66c4dff8 100644
--- a/src/views/dashboard/components/RankTable.vue
+++ b/src/views/dashboard/components/RankTable.vue
@@ -10,17 +10,24 @@
       style="width: 100%"
     >
       <el-table-column :label="$tc('Ranking')" width="80px">
-        <template v-slot="scope">
-          <span>{{ scope.$index + 1 }}</span>
+        <template v-slot="scope" #header>
+          <el-tooltip :content="$t('Ranking')" placement="top" :open-delay="500">
+            <span style="cursor: pointer;">{{ $t('Ranking') }}</span>
+          </el-tooltip>
         </template>
       </el-table-column>
       <el-table-column
         v-for="i in config.columns"
         :key="i.prop"
-        :label="i.label"
         :prop="i.prop"
         :width="i.width"
-      />
+      >
+        <template #header>
+          <el-tooltip :content="i.label" placement="top" :open-delay="500">
+            <span style="cursor: pointer;">{{ i.label }}</span>
+          </el-tooltip>
+        </template>
+      </el-table-column>
     </el-table>
   </div>
 </template>
diff --git a/src/views/dashboard/components/RingChart.vue b/src/views/dashboard/components/RingChart.vue
index 3935ca74e5..d8c611a32b 100644
--- a/src/views/dashboard/components/RingChart.vue
+++ b/src/views/dashboard/components/RingChart.vue
@@ -30,17 +30,35 @@ export default {
       let percentage = activeDecimal.dividedBy(totalDecimal).times(100)
       percentage = isNaN(percentage) ? 0 : percentage
       percentage = percentage.toFixed(2)
+
+      const formatTitle = (text) => {
+        if (!text) return ''
+        const maxLength = 23
+        const lines = []
+        for (let i = 0; i < text.length; i += maxLength) {
+          lines.push(text.slice(i, i + maxLength))
+        }
+        return lines.join('\n')
+      }
+
       return {
         title: [
           {
-            text: this.config.chartTitle,
+            text: formatTitle(this.config.chartTitle),
             textStyle: {
               color: '#646A73',
-              fontSize: 12
+              fontSize: 12,
+              lineHeight: 16,
+              rich: {
+                width: 100,
+                overflow: 'break'
+              }
             },
             textAlign: 'center',
             left: '48%',
-            top: '32%'
+            top: '32%',
+            width: 100,
+            overflow: 'break'
           },
           {
             left: '48%',