diff --git a/front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue
index d52206ab..f7ed512b 100644
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue
@@ -9,7 +9,13 @@
   <div class="algorithm-top-details">
     <div class="left">
       <div class="top">
-        <span class="name">{{ props.dataList.name }}</span>
+        <a-tooltip placement="top">
+          <template #title>{{ props.dataList.name }}</template>
+          <span class="name">
+            {{ props.dataList.name }}
+          </span>
+        </a-tooltip>
+        <!-- <span class="name">{{ props.dataList.name }}</span> -->
         <div class="label-content">
           <p class="lable-father">
             <span class="label">
@@ -137,12 +143,19 @@
         }
         .name {
           display: inline-block;
-          width: 10.2rem;
+          // width: 10.2rem;
           // overflow: hidden;
           // text-overflow: ellipsis;
           // white-space: nowrap;
           font-size: 40px;
           margin-right: 20px;
+          max-width: 7rem;
+          text-overflow: -o-ellipsis-lastline;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
         }
         .label-content {
           position: relative;
diff --git a/front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue b/front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue
index 5026f8d8..1e3c06f0 100644
--- a/front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue
@@ -9,7 +9,13 @@
   <div class="algorithm-top-details">
     <div class="left">
       <div class="top">
-        <span class="name">{{ props.dataList.name }}</span>
+        <a-tooltip placement="top">
+          <template #title>{{ props.dataList.name }}</template>
+          <span class="name">
+            {{ props.dataList.name }}
+          </span>
+        </a-tooltip>
+        <!-- <span class="name">{{ props.dataList.name }}</span> -->
         <div class="label-content">
           <p class="lable-father">
             <span class="label">{{ props.dataList.type }}</span>
@@ -124,9 +130,18 @@
           // max-width: 3.3rem;
           // overflow: hidden;
           // text-overflow: ellipsis;
-          white-space: nowrap;
+          // white-space: nowrap;
           font-size: 0.4rem;
           margin-right: 0.2rem;
+          font-size: 0.4rem;
+          margin-right: 0.2rem;
+          max-width: 7rem;
+          text-overflow: -o-ellipsis-lastline;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
         }
         .label-content {
           position: relative;
diff --git a/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue b/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue
index fa6b83e2..42bea3df 100644
--- a/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessTopDetails.vue
@@ -9,7 +9,13 @@
   <div class="algorithm-top-details">
     <div class="left">
       <div class="top">
-        <span class="name">{{ props.dataList.name }}</span>
+        <a-tooltip placement="top">
+          <template #title>{{ props.dataList.name }}</template>
+          <span class="name">
+            {{ props.dataList.name }}
+          </span>
+        </a-tooltip>
+        <!-- <span class="name">{{ props.dataList.name }}</span> -->
         <div class="label-content">
           <p class="lable-father">
             <span class="label">
@@ -140,9 +146,16 @@
           // max-width: 3.3rem;
           // overflow: hidden;
           // text-overflow: ellipsis;
-          white-space: nowrap;
+          // white-space: nowrap;
           font-size: 0.4rem;
           margin-right: 0.2rem;
+          max-width: 7rem;
+          text-overflow: -o-ellipsis-lastline;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
         }
         .label-content {
           position: relative;
diff --git a/front/src/views/detailsAll/components/Developer/DeveloperTopDetails.vue b/front/src/views/detailsAll/components/Developer/DeveloperTopDetails.vue
index f0734a64..2fc2e974 100644
--- a/front/src/views/detailsAll/components/Developer/DeveloperTopDetails.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperTopDetails.vue
@@ -9,7 +9,13 @@
   <div class="algorithm-top-details">
     <div class="left">
       <div class="top">
-        <span class="name">{{ props.dataList.name }}</span>
+        <a-tooltip placement="top">
+          <template #title>{{ props.dataList.name }}</template>
+          <span class="name">
+            {{ props.dataList.name }}
+          </span>
+        </a-tooltip>
+        <!-- <span class="name">{{ props.dataList.name }}</span> -->
         <div class="label-content">
           <p class="lable-father">
             <span class="label">
@@ -139,9 +145,16 @@
           // max-width: 3.3rem;
           // overflow: hidden;
           // text-overflow: ellipsis;
-          white-space: nowrap;
+          // white-space: nowrap;
           font-size: 0.4rem;
           margin-right: 0.2rem;
+          max-width: 7rem;
+          text-overflow: -o-ellipsis-lastline;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
         }
         .label-content {
           position: relative;
diff --git a/front/src/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue b/front/src/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue
index 3fb2b33a..f307a4fe 100644
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue
@@ -9,7 +9,13 @@
   <div class="algorithm-top-details">
     <div class="left">
       <div class="top">
-        <span class="name">{{ props.dataList.name }}</span>
+        <a-tooltip placement="top">
+          <template #title>{{ props.dataList.name }}</template>
+          <span class="name">
+            {{ props.dataList.name }}
+          </span>
+        </a-tooltip>
+        <!-- <span class="name">{{ props.dataList.name }}</span> -->
         <div class="label-content">
           <p class="lable-father">
             <span class="label">
@@ -140,9 +146,16 @@
           // max-width: 3.3rem;
           // overflow: hidden;
           // text-overflow: ellipsis;
-          white-space: nowrap;
+          // white-space: nowrap;
           font-size: 0.4rem;
           margin-right: 0.2rem;
+          max-width: 7rem;
+          text-overflow: -o-ellipsis-lastline;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
         }
         .label-content {
           position: relative;