diff --git a/web/src/pages/knowledge/knowledge-card/index.less b/web/src/pages/knowledge/knowledge-card/index.less
index bd5d81911..8f074bf45 100644
--- a/web/src/pages/knowledge/knowledge-card/index.less
+++ b/web/src/pages/knowledge/knowledge-card/index.less
@@ -23,6 +23,35 @@
   .footerTop {
     padding-bottom: 2px;
   }
+
+  .titleWrapper {
+    margin: 16px 0;
+    overflow: hidden;
+    
+    .title {
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      font-size: 24px;
+      line-height: 32px;
+      font-weight: 600;
+      color: rgba(0, 0, 0, 0.88);
+      word-break: break-all;
+    }
+    
+    .description{
+      margin-top: 4px;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 20px;
+      color: rgba(0, 0, 0, 0.45);
+    }
+  }
 }
 
 .card {
diff --git a/web/src/pages/knowledge/knowledge-card/index.tsx b/web/src/pages/knowledge/knowledge-card/index.tsx
index 7f6e13169..0fa41428c 100644
--- a/web/src/pages/knowledge/knowledge-card/index.tsx
+++ b/web/src/pages/knowledge/knowledge-card/index.tsx
@@ -53,7 +53,7 @@ const KnowledgeCard = ({ item }: IProps) => {
           </div>
           <div className={styles.titleWrapper}>
             <span className={styles.title}>{item.name}</span>
-            <p>{item.description}</p>
+            <p className={styles.description}>{item.description}</p>
           </div>
           <div className={styles.footer}>
             <div className={styles.footerTop}>