feat: limit the num of lines for filename (#1424)

* feat: limit the linenum of  filename

* change the implement of line-clamp

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",

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>

web/tailwind.config.js

@@ -34,4 +34,7 @@ module.exports = {
       },
     },
   },
+  plugins: [
+    require('@tailwindcss/line-clamp'),
+  ],
 };