diff --git a/mindinsight/ui/src/views/train-manage/histogram.vue b/mindinsight/ui/src/views/train-manage/histogram.vue
index 1e061d58e07d399a42a55ab90a0c9465040a72e7..f6ebd0c8dc7e8f50bb590439c6c41fa06a8803c7 100644
--- a/mindinsight/ui/src/views/train-manage/histogram.vue
+++ b/mindinsight/ui/src/views/train-manage/histogram.vue
@@ -1423,6 +1423,9 @@ export default {
             font-size: 16px;
             font-weight: 600;
             text-align: center;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
           }
         }
       }
diff --git a/mindinsight/ui/src/views/train-manage/training-dashboard.vue b/mindinsight/ui/src/views/train-manage/training-dashboard.vue
index a4a5247cb91dc60a39d17b7903cd5bcb64eaedda..624beb818452b42a3b9b6eebdedad62389ef48d4 100644
--- a/mindinsight/ui/src/views/train-manage/training-dashboard.vue
+++ b/mindinsight/ui/src/views/train-manage/training-dashboard.vue
@@ -64,7 +64,8 @@ limitations under the License.
           <div class="histogram-char-container"
                v-show="!!histogramTag && !wrongPlugin">
             <div id="distribution-chart"></div>
-            <div class="tag-text">{{histogramTag}}</div>
+            <div class="tag-text"
+                 :title="histogramTag">{{histogramTag}}</div>
           </div>
           <div class="no-data-img"
                key="no-chart-data"
@@ -1941,6 +1942,9 @@ export default {
       font-size: 12px;
       font-weight: 400;
       text-align: center;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
     }
   }