最近文件名称超出隐藏悬浮显示

src/layout/components/DefaultPage/DefaultPage.vue

@@ -55,13 +55,12 @@
             v-infinite-scroll="setScroll"
             infinite-scroll-distance="30"
           >
-            <div
-              class="oneBox"
-              v-for="item in hightData"
-              :key="item.id"
-              
-            >
-              <span class="fileName hand" @click="toFile(item.content.docInfo)">{{ item.content.docInfo.fileName }}</span>
+            <div class="oneBox" v-for="item in hightData" :key="item.id">
+              <span
+                class="fileName hand"
+                @click="toFile(item.content.docInfo)"
+                >{{ item.content.docInfo.fileName }}</span
+              >
               <div class="flieTime">
                 <span>创建时间：</span>
                 <span>{{ item.content.docInfo.createTime }}</span>
@@ -169,7 +168,15 @@
               <img :src="setImg(item == null ? '' : item.fileType)" alt="" />
             </div>
             <div class="rightBox">
-              <div class="text hand">{{ item.fileName }}</div>
+              <el-tooltip
+                class="box-item"
+                effect="dark"
+                placement="top"
+                :show-after="1000"
+                :content="item.fileName"
+              >
+                <div class="text hand">{{ item.fileName }}</div>
+              </el-tooltip>
               <div class="time">{{ item.createTime }}</div>
             </div>
             <img
@@ -759,7 +766,7 @@ onMounted(() => {
     display: flex;
     justify-content: center;
     align-items: center;
-    font-family:Inter-Bold;
+    font-family: Inter-Bold;
     span {
       margin-left: 8px;
     }
@@ -882,6 +889,12 @@ onMounted(() => {
             font-family: Inter-Medium;
             font-size: 16px;
             color: #030102;
+            /*第一步： 溢出隐藏 */
+            overflow: hidden;
+            /* 第二步：让文本不会换行， 在同一行继续 */
+            white-space: nowrap;
+            /* 第三步：用省略号来代表未显示完的文本 */
+            text-overflow: ellipsis;
           }
           .time {
             font-weight: 500;