diff --git a/web_src/vuepages/pages/modelmanage/common/modelmanage-common-detail.vue b/web_src/vuepages/pages/modelmanage/common/modelmanage-common-detail.vue
index b94029a34..81d3d940e 100644
--- a/web_src/vuepages/pages/modelmanage/common/modelmanage-common-detail.vue
+++ b/web_src/vuepages/pages/modelmanage/common/modelmanage-common-detail.vue
@@ -172,14 +172,14 @@
                   <a v-if="scope.row.IsDir" @click="goNextDir(scope.row)" href="javascript:;">
                     <div class="fitted" :title="scope.row.FileName">
                       <i class="icon folder" width="16" height="16" aria-hidden="true"></i>
-                      {{ scope.row.FileName }}
+                      <span>{{ scope.row.FileName }}</span>
                     </div>
                   </a>
                   <a v-else :class="!canOperate ? 'disabled-download' : ''"
                     :href="canOperate ? `${repo}/modelmanage/${state.id}/downloadsingle?parentDir=${filePath[filePath.length - 1].path ? filePath[filePath.length - 1].path + '/' : ''}&fileName=${scope.row.FileName}` : 'javascript:;'">
                     <div class="fitted" :title="scope.row.FileName">
                       <i class="icon file" width="16" height="16" aria-hidden="true"></i>
-                      {{ scope.row.FileName }}
+                      <span>{{ scope.row.FileName }}</span>
                     </div>
                   </a>
                 </div>
@@ -628,6 +628,18 @@ export default {
         overflow: hidden;
         font-size: 16px;
         font-weight: 500;
+        position: relative;
+
+        a {
+          max-width: 100%;
+
+          .fitted {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            max-width: 100%;
+          }
+        }
 
         .disabled-download {
           cursor: default;