Optimize the knowledge base card UI (#3756)

### What problem does this PR solve?

Set the title to 2 lines, display the excess part
Set the description to 3 lines, display the excess part

![image](https://github.com/user-attachments/assets/4b01cac5-b7a3-40cc-8965-42aeba9ea233)

![image](https://github.com/user-attachments/assets/aa4230eb-100f-4905-9cf0-75ce9813a332)


### Type of change

- [x] Other (please describe):

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 {

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}>