fix(仪表板、数据大屏): 修复图表，数据集、外置参数配置等文本标题超出问题 (#16600)

core/core-frontend/src/components/visualization/OuterParamsSet.vue

@@ -166,7 +166,9 @@
                             <Icon name="icon_dataset"><icon_dataset class="svg-icon" /></Icon>
                           </el-icon>
                         </div>
-                        <span>{{ baseDatasetInfo.name }}</span>
+                        <span :title="baseDatasetInfo.name" class="ellipsis">{{
+                          baseDatasetInfo.name
+                        }}</span>
                       </div>
                       <div style="flex: 1; margin-left: -16px">
                         <el-select
@@ -253,7 +255,13 @@
                               ></component
                             ></Icon>
                           </div>
-                          <span style="font-size: 12px"> {{ viewInfo.chartName }}</span>
+                          <span
+                            class="ellipsis"
+                            :title="viewInfo.chartName"
+                            style="font-size: 12px"
+                          >
+                            {{ viewInfo.chartName }}</span
+                          >
                         </div>
                       </div>
                     </div>
@@ -1128,4 +1136,11 @@ defineExpose({
   color: #646a73;
   margin: 3px 0 0 4px;
 }
+
+.ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 220px;
+}
 </style>

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

@@ -1087,7 +1087,7 @@ const clearG2Tooltip = () => {
       :style="{ 'justify-content': titleAlign, 'margin-bottom': marginBottom }"
     >
       <template v-if="!titleEditStatus">
-        <p v-if="titleShow" :style="state.title_class" @dblclick="changeEditTitle">
+        <p class="ellipsis" v-if="titleShow" :style="state.title_class" @dblclick="changeEditTitle">
           {{ view.title }}
         </p>
       </template>
@@ -1329,4 +1329,11 @@ const clearG2Tooltip = () => {
 .fade-leave-to {
   opacity: 0;
 }
+
+.ellipsis {
+  white-space: nowrap !important;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
 </style>