Merge pull request #13075 from dataease/pr@dev-v2@chart-title-style

style(图表): 优化图表标题备注在移动端的显示长度

core/core-frontend/src/views/chart/components/views/index.vue

@@ -917,6 +917,18 @@ const loadPluginCategory = data => {
 const allEmptyCheck = computed(() => {
   return ['rich-text', 'picture-group'].includes(element.value.innerType)
 })
+/**
+ * 标题提示的最大宽度
+ */
+const titleTooltipWidth = computed(() => {
+  if (inMobile.value) {
+    return `${screen.width - 10}px`
+  }
+  if (mobileInPc.value) {
+    return '270px'
+  }
+  return '500px'
+})
 </script>
 
 <template>
@@ -959,12 +971,12 @@ const allEmptyCheck = computed(() => {
           <el-tooltip :effect="toolTip" placement="top" v-if="state.title_remark.show">
             <template #content>
               <div
-                style="
+                :style="{
-                  width: 500px;
+                  maxWidth: titleTooltipWidth,
-                  word-break: break-all;
+                  wordBreak: 'break-all',
-                  word-wrap: break-word;
+                  wordWrap: 'break-word',
-                  white-space: pre-wrap;
+                  whiteSpace: 'pre-wrap'
-                "
+                }"
                 v-html="state.title_remark.remark"
               ></div>
             </template>