diff --git a/web/package.json b/web/package.json
index 1c0029d9..ea757f5c 100644
--- a/web/package.json
+++ b/web/package.json
@@ -33,6 +33,7 @@
     "zustand": "^4.3.6"
   },
   "devDependencies": {
+    "@tailwindcss/line-clamp": "^0.4.2",
     "@types/lodash-es": "^4.17.5",
     "@types/node": "^18.0.3",
     "@types/qs": "^6.9.7",
diff --git a/web/src/components/ResourceCard.tsx b/web/src/components/ResourceCard.tsx
index 9ff41b06..68b06476 100644
--- a/web/src/components/ResourceCard.tsx
+++ b/web/src/components/ResourceCard.tsx
@@ -45,7 +45,7 @@ const ResourceCard = ({
         <ResourceCover resource={resource} />
       </div>
       <div className="w-full flex flex-col justify-start items-center px-1 select-none">
-        <div className="w-full text-base text-center text-ellipsis overflow-hidden">{resource.filename}</div>
+        <div className="w-full text-base text-center text-ellipsis overflow-hidden line-clamp-3">{resource.filename}</div>
         <div className="text-xs text-gray-400 text-center">{dayjs(resource.createdTs).locale("en").format("YYYY/MM/DD HH:mm:ss")}</div>
       </div>
     </div>
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index f52061c6..fb113ac9 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -34,4 +34,7 @@ module.exports = {
       },
     },
   },
+  plugins: [
+    require('@tailwindcss/line-clamp'),
+  ],
 };