From 830cda6a3ae028dd6765cade8c0f9379de84796d Mon Sep 17 00:00:00 2001
From: chanx <1243304602@qq.com>
Date: Wed, 20 Aug 2025 15:42:21 +0800
Subject: [PATCH] Fix (web): Optimize text display effect #3221 (#9594)

### What problem does this PR solve?

Fix (web): Optimize text display effect
-Add text ellipsis and overflow hidden classes to the HomeCard component
to achieve text overflow hiding and ellipsis effects
-Add text ellipsis and overflow hidden classes to the DatasetSidebar
component to improve the display of dataset names

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
---
 web/src/components/home-card.tsx        | 2 +-
 web/src/pages/dataset/sidebar/index.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/components/home-card.tsx b/web/src/components/home-card.tsx
index 65e10e77e..cdee90f25 100644
--- a/web/src/components/home-card.tsx
+++ b/web/src/components/home-card.tsx
@@ -31,7 +31,7 @@ export function HomeCard({ data, onClick, moreDropdown }: IProps) {
         </div>
         <div className="flex flex-col justify-between gap-1 flex-1 h-full w-[calc(100%-50px)]">
           <section className="flex justify-between">
-            <div className="text-[20px] font-bold w-80% leading-5">
+            <div className="text-[20px] font-bold w-80% leading-5 text-ellipsis overflow-hidden">
               {data.name}
             </div>
             {moreDropdown}
diff --git a/web/src/pages/dataset/sidebar/index.tsx b/web/src/pages/dataset/sidebar/index.tsx
index 37e46ca0a..6c49d7a31 100644
--- a/web/src/pages/dataset/sidebar/index.tsx
+++ b/web/src/pages/dataset/sidebar/index.tsx
@@ -62,8 +62,8 @@ export function SideBar({ refreshCount }: PropType) {
           name={data.name}
           className="size-16"
         ></RAGFlowAvatar>
-        <div className=" text-text-secondary text-xs space-y-1">
-          <h3 className="text-lg font-semibold line-clamp-1 text-text-primary">
+        <div className=" text-text-secondary text-xs space-y-1 overflow-hidden">
+          <h3 className="text-lg font-semibold line-clamp-1 text-text-primary text-ellipsis overflow-hidden">
             {data.name}
           </h3>
           <div className="flex justify-between">