diff --git a/core/frontend/src/views/chart/components/ChartTitleUpdate.vue b/core/frontend/src/views/chart/components/ChartTitleUpdate.vue
index 499dfa9ca1..250e390096 100644
--- a/core/frontend/src/views/chart/components/ChartTitleUpdate.vue
+++ b/core/frontend/src/views/chart/components/ChartTitleUpdate.vue
@@ -8,6 +8,7 @@
       ref="chartTitle"
       v-model.trim="chartTitleUpdate"
       type="text"
+      maxlength="50"
       :style="inputStyle"
       class="chart-input-title"
       @blur="changeEditStatus"
@@ -91,10 +92,6 @@ export default {
   methods: {
     changeEditStatus() {
       this.lostFocus()
-      if (this.chartTitleUpdate.length > 50) {
-        this.$error(this.$t('chart.title_limit'))
-        return
-      }
       if (this.chartTitleUpdate.length < 1) {
         this.$error(this.$t('chart.title_cannot_empty'))
         this.chartTitleUpdate = this.chart.title
diff --git a/core/frontend/src/views/chart/view/ChartEdit.vue b/core/frontend/src/views/chart/view/ChartEdit.vue
index b1b56b574c..944b3a123b 100644
--- a/core/frontend/src/views/chart/view/ChartEdit.vue
+++ b/core/frontend/src/views/chart/view/ChartEdit.vue
@@ -37,8 +37,7 @@
         />
       </el-popover>
       <span
-        class="title-text view-title-name"
-        style="line-height: 40px;"
+        class="title-text view-title-name-update"
       >
         <chart-title-update
           :chart-info="view"
@@ -4210,13 +4209,11 @@ span {
   margin-left: 4px;
 }
 
-.view-title-name {
+.view-title-name-update {
   display: -moz-inline-box;
   display: inline-block;
-  width: 130px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
+  width: 170px;
+  height: 40px;
   margin-left: 45px;
 }
 
diff --git a/core/frontend/src/views/chart/view/ChartTitleUpdate.vue b/core/frontend/src/views/chart/view/ChartTitleUpdate.vue
index 5df628d9a0..be5acd92c1 100644
--- a/core/frontend/src/views/chart/view/ChartTitleUpdate.vue
+++ b/core/frontend/src/views/chart/view/ChartTitleUpdate.vue
@@ -8,7 +8,7 @@
       ref="chartTitle"
       v-model.trim="chartTitleUpdate"
       type="text"
-      :style="inputStyle"
+      maxlength="50"
       class="chart-input-title"
       @blur="changeEditStatus"
     >
@@ -19,18 +19,21 @@
       @click="chartTitleUpdate = ''"
     />
   </div>
-  <p
+  <span
     v-else
     style="
       overflow: hidden;
       white-space: pre;
       text-overflow: ellipsis;
-      display: inline;
+      display: inline-block;
       min-width: 30px;
+      width: 100%;
+      height: 40px;
+      line-height: 40px;
       cursor: pointer;
     "
     @dblclick="handleTitleEditer"
-  >{{ chart.title }}</p>
+  >{{ chart.title }}</span>
 </template>
 
 <script>
@@ -84,10 +87,6 @@ export default {
   methods: {
     changeEditStatus() {
       this.lostFocus()
-      if (this.chartTitleUpdate.length > 50) {
-        this.$error(this.$t('chart.title_limit'))
-        return
-      }
       if (this.chartTitleUpdate.length < 1) {
         this.$error(this.$t('chart.title_cannot_empty'))
         this.chartTitleUpdate = this.chart.title