From 2968e7daa2c71fc846f714d419dbcf5a929b82ee Mon Sep 17 00:00:00 2001
From: ahonn <ahonn95@outlook.com>
Date: Tue, 26 Apr 2022 17:41:39 +0800
Subject: [PATCH] feat: add line-clamp style

---
 src/components/TaskItem.tsx | 6 +++---
 windi.config.ts             | 5 +++++
 2 files changed, 8 insertions(+), 3 deletions(-)
 create mode 100644 windi.config.ts

diff --git a/src/components/TaskItem.tsx b/src/components/TaskItem.tsx
index f1e4547..9b70771 100644
--- a/src/components/TaskItem.tsx
+++ b/src/components/TaskItem.tsx
@@ -37,7 +37,7 @@ const TaskItem: React.FC<ITaskItemProps> = (props) => {
     window.logseq.hideMainUI();
   };
 
-  const contentClassName = classnames({
+  const contentClassName = classnames('line-clamp-4', {
     'line-through': checked,
     'text-gray-400': checked,
   });
@@ -51,7 +51,7 @@ const TaskItem: React.FC<ITaskItemProps> = (props) => {
           className="pt-1 mr-2"
         />
       </div>
-      <div className="flex-1 border-b border-gray-100 pb-2 pt-1 text-sm leading-normal">
+      <div className="flex-1 border-b border-gray-100 pb-2 pt-1 text-sm leading-normal break-all">
         <div className="flex justify-between items-center">
           <div className="flex-col">
             <p className={contentClassName}>{content}</p>
@@ -66,7 +66,7 @@ const TaskItem: React.FC<ITaskItemProps> = (props) => {
               </time>
             )}
           </div>
-          <div className="px-1" onClick={openTaskBlock}>
+          <div className="pl-2 pr-1" onClick={openTaskBlock}>
             <InfoCircle size={20} className="stroke-gray-300 cursor-pointer" />
           </div>
         </div>
diff --git a/windi.config.ts b/windi.config.ts
new file mode 100644
index 0000000..9f4af17
--- /dev/null
+++ b/windi.config.ts
@@ -0,0 +1,5 @@
+export default {
+  plugins: [
+    require('windicss/plugin/line-clamp'),
+  ],
+}