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