From 70b03c3c6bb376592712aadad265b4f680eb35ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=96=BB=E5=8B=87=E7=A5=A5?= <237899745@qq.com>
Date: Fri, 14 Nov 2025 09:20:13 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=88=86=E4=BA=AB?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=96=87=E4=BB=B6=E5=90=8D=E8=BF=87=E9=95=BF?=
 =?UTF-8?q?=E5=AF=BC=E8=87=B4=E5=B8=83=E5=B1=80=E6=BA=A2=E5=87=BA=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修改内容:
1. 单文件显示 (.single-file-name):
   - 添加 max-width: 100% 限制最大宽度
   - 使用 -webkit-line-clamp: 3 限制最多显示3行
   - 超出部分显示省略号 (...)
   - 改用 word-break: break-word 更优雅的换行

2. 列表视图文件名:
   - 添加 .file-name-container 和 .file-name-text 类
   - 使用 overflow: hidden 和 text-overflow: ellipsis
   - 单行显示，超出显示省略号
   - 设置 min-width: 0 确保flex容器正确缩小

修复效果:
- 文件名再长也不会溢出到界面外
- 单文件视图最多显示3行
- 列表视图单行显示带省略号
- 鼠标悬停在网格视图文件名上会显示完整文件名(title属性)
---
 frontend/share.html | 29 +++++++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/frontend/share.html b/frontend/share.html
index ede2533..b553bee 100644
--- a/frontend/share.html
+++ b/frontend/share.html
@@ -82,7 +82,20 @@
       align-items: center;
       gap: 15px;
     }
-    .file-icon {
+    /* 列表视图文件名容器 */
+    .file-name-container {
+      flex: 1;
+      min-width: 0;  /* 允许flex子项缩小到内容大小以下 */
+      max-width: 100%;
+    }
+    .file-name-text {
+      font-weight: 500;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 100%;
+    }
+        .file-icon {
       font-size: 24px;
     }
     .loading {
@@ -193,9 +206,17 @@
       font-size: 20px;
       font-weight: 600;
       text-align: center;
-      word-break: break-all;
+      word-break: break-word;
       margin-bottom: 15px;
       color: #333;
+      /* 限制文件名显示，防止过长溢出 */
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;  /* 最多显示3行 */
+      -webkit-box-orient: vertical;
+      line-height: 1.4;
     }
     .single-file-size {
       font-size: 16px;
@@ -556,8 +577,8 @@
             <li v-for="file in files" :key="file.name" class="file-item">
               <div class="file-info">
                 <i class="file-icon fas" :class="getFileIcon(file)" :style="getIconColor(file)"></i>
-                <div>
-                  <div style="font-weight: 500;">{{ file.name }}</div>
+                <div class="file-name-container">
+                  <div class="file-name-text">{{ file.name }}</div>
                   <div style="font-size: 12px; color: #999;">{{ file.sizeFormatted }}</div>
                 </div>
               </div>