diff --git a/test-track/frontend/src/business/review/view/components/TestReviewTestCaseEditHeaderBar.vue b/test-track/frontend/src/business/review/view/components/TestReviewTestCaseEditHeaderBar.vue
index 6da52ac2e8..a26ca36926 100644
--- a/test-track/frontend/src/business/review/view/components/TestReviewTestCaseEditHeaderBar.vue
+++ b/test-track/frontend/src/business/review/view/components/TestReviewTestCaseEditHeaderBar.vue
@@ -1,9 +1,15 @@
 <template>
   <div class="bar-container">
     <div class="left-item bar-item">
-      <span>
+      <el-tooltip v-if="longerThanLimit" :content="testCase.name" effect="dark" placement="bottom-start">
+        <span>
+          {{ this.displayName }}
+        </span>
+      </el-tooltip>
+      <span v-else>
         {{ testCase.name }}
       </span>
+
       <el-popover v-if="reviewerStatus && reviewerStatus.length > 0" placement="right" trigger="hover">
 
         <div class="status-tip" v-for="item in reviewerStatus" :key="item.author">
@@ -51,7 +57,8 @@ export default {
   components: {ReviewStatus, MsUserIcon},
   data() {
     return {
-      reviewerStatus: null
+      reviewerStatus: null,
+      nameLengthLimit: 50
     };
   },
   props: {
@@ -62,6 +69,17 @@ export default {
       },
     }
   },
+  computed: {
+    displayName() {
+      if (this.longerThanLimit) {
+        return this.testCase.name.substring(0, this.nameLengthLimit) + '...';
+      }
+      return this.testCase.name;
+    },
+    longerThanLimit() {
+      return this.testCase.name && this.testCase.name.length > this.nameLengthLimit;
+    }
+  },
   watch: {
     testCase() {
       this.getReviewerStatus();
diff --git a/test-track/frontend/src/business/review/view/components/TestReviewTestCaseList.vue b/test-track/frontend/src/business/review/view/components/TestReviewTestCaseList.vue
index db19366cc2..cabe66c9ad 100644
--- a/test-track/frontend/src/business/review/view/components/TestReviewTestCaseList.vue
+++ b/test-track/frontend/src/business/review/view/components/TestReviewTestCaseList.vue
@@ -504,7 +504,11 @@ export default {
       this.$refs.testReviewTestCaseEdit.openTestCaseEdit(testCase, this.tableData);
     },
     handleDelete(testCase) {
-      this.$alert(this.$t('test_track.plan_view.confirm_cancel_relevance') + ' ' + testCase.name + " ？", '', {
+      let tip = this.$t('test_track.plan_view.confirm_cancel_relevance') + ' ' + testCase.name;
+      if (tip.length > 50) {
+        tip = tip.substring(0, 50) + '...';
+      }
+      this.$alert( tip + " ？", '', {
         confirmButtonText: this.$t('commons.confirm'),
         callback: (action) => {
           if (action === 'confirm') {