From 28bd411edab4bf6a81fff87fc81eb502b13ffbbb Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Mon, 27 Mar 2023 12:30:23 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dnext/example=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E7=BB=93=E6=9E=9C=E5=86=85=E5=AE=B9=E5=A4=AA=E9=95=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 styles/globals.css                        | 9 +++++++++
 themes/example/components/BlogListPage.js | 2 +-
 themes/next/components/BlogPostCard.js    | 2 +-
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/styles/globals.css b/styles/globals.css
index 6d56d518..7af1cb0e 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -222,4 +222,13 @@ nav {
 /* twikoo 评论区超链接样式 */
 .tk-main a {
    @apply text-blue-700
+}
+
+/* 最多显示4行文字 */
+.p-4-lines {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
\ No newline at end of file
diff --git a/themes/example/components/BlogListPage.js b/themes/example/components/BlogListPage.js
index bee037bd..c655df4a 100644
--- a/themes/example/components/BlogListPage.js
+++ b/themes/example/components/BlogListPage.js
@@ -42,7 +42,7 @@ export const BlogListPage = props => {
                         </p>
                             {/* 搜索结果 */}
                         {p.results && (
-                            <p className="mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
+                            <p className="p-4-lines mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
                             {p.results.map(r => (
                                 <span key={r}>{r}</span>
                             ))}
diff --git a/themes/next/components/BlogPostCard.js b/themes/next/components/BlogPostCard.js
index a73abbd5..ad45b4a3 100644
--- a/themes/next/components/BlogPostCard.js
+++ b/themes/next/components/BlogPostCard.js
@@ -75,7 +75,7 @@ const BlogPostCard = ({ post, showSummary }) => {
 
           {/* 搜索结果 */}
           {post.results && (
-            <p className="mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
+            <p className="p-4-lines mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
               {post.results.map(r => (
                 <span key={r}>{r}</span>
               ))}