diff --git a/webapp/src/components/__snapshots__/centerPanel.test.tsx.snap b/webapp/src/components/__snapshots__/centerPanel.test.tsx.snap
index 6b7d6ac6c..f7f89108d 100644
--- a/webapp/src/components/__snapshots__/centerPanel.test.tsx.snap
+++ b/webapp/src/components/__snapshots__/centerPanel.test.tsx.snap
@@ -493,7 +493,9 @@ exports[`components/centerPanel return centerPanel and click on card to show car
               >
                 i
               </div>
-              <div>
+              <div
+                class="octo-titletext"
+              >
                 card1
               </div>
             </div>
@@ -525,7 +527,9 @@ exports[`components/centerPanel return centerPanel and click on card to show car
               >
                 i
               </div>
-              <div>
+              <div
+                class="octo-titletext"
+              >
                 card2
               </div>
             </div>
@@ -7970,7 +7974,9 @@ exports[`components/centerPanel should match snapshot for Kanban 1`] = `
               >
                 i
               </div>
-              <div>
+              <div
+                class="octo-titletext"
+              >
                 card1
               </div>
             </div>
diff --git a/webapp/src/components/__snapshots__/workspace.test.tsx.snap b/webapp/src/components/__snapshots__/workspace.test.tsx.snap
index 477eca951..57b992771 100644
--- a/webapp/src/components/__snapshots__/workspace.test.tsx.snap
+++ b/webapp/src/components/__snapshots__/workspace.test.tsx.snap
@@ -660,7 +660,9 @@ exports[`src/components/workspace return workspace and showcard 1`] = `
                   >
                     i
                   </div>
-                  <div>
+                  <div
+                    class="octo-titletext"
+                  >
                     card-1
                   </div>
                 </div>
@@ -702,7 +704,9 @@ exports[`src/components/workspace return workspace and showcard 1`] = `
                   >
                     i
                   </div>
-                  <div>
+                  <div
+                    class="octo-titletext"
+                  >
                     card-2
                   </div>
                 </div>
@@ -744,7 +748,9 @@ exports[`src/components/workspace return workspace and showcard 1`] = `
                   >
                     i
                   </div>
-                  <div>
+                  <div
+                    class="octo-titletext"
+                  >
                     card-3
                   </div>
                 </div>
@@ -1042,7 +1048,9 @@ exports[`src/components/workspace return workspace readonly and showcard 1`] = `
                   >
                     i
                   </div>
-                  <div>
+                  <div
+                    class="octo-titletext"
+                  >
                     card-1
                   </div>
                 </div>
@@ -1070,7 +1078,9 @@ exports[`src/components/workspace return workspace readonly and showcard 1`] = `
                   >
                     i
                   </div>
-                  <div>
+                  <div
+                    class="octo-titletext"
+                  >
                     card-2
                   </div>
                 </div>
@@ -1098,7 +1108,9 @@ exports[`src/components/workspace return workspace readonly and showcard 1`] = `
                   >
                     i
                   </div>
-                  <div>
+                  <div
+                    class="octo-titletext"
+                  >
                     card-3
                   </div>
                 </div>
@@ -1807,7 +1819,9 @@ exports[`src/components/workspace should match snapshot 1`] = `
                   >
                     i
                   </div>
-                  <div>
+                  <div
+                    class="octo-titletext"
+                  >
                     card-1
                   </div>
                 </div>
@@ -1849,7 +1863,9 @@ exports[`src/components/workspace should match snapshot 1`] = `
                   >
                     i
                   </div>
-                  <div>
+                  <div
+                    class="octo-titletext"
+                  >
                     card-2
                   </div>
                 </div>
@@ -1891,7 +1907,9 @@ exports[`src/components/workspace should match snapshot 1`] = `
                   >
                     i
                   </div>
-                  <div>
+                  <div
+                    class="octo-titletext"
+                  >
                     card-3
                   </div>
                 </div>
@@ -2189,7 +2207,9 @@ exports[`src/components/workspace should match snapshot with readonly 1`] = `
                   >
                     i
                   </div>
-                  <div>
+                  <div
+                    class="octo-titletext"
+                  >
                     card-1
                   </div>
                 </div>
@@ -2217,7 +2237,9 @@ exports[`src/components/workspace should match snapshot with readonly 1`] = `
                   >
                     i
                   </div>
-                  <div>
+                  <div
+                    class="octo-titletext"
+                  >
                     card-2
                   </div>
                 </div>
@@ -2245,7 +2267,9 @@ exports[`src/components/workspace should match snapshot with readonly 1`] = `
                   >
                     i
                   </div>
-                  <div>
+                  <div
+                    class="octo-titletext"
+                  >
                     card-3
                   </div>
                 </div>
diff --git a/webapp/src/components/kanban/__snapshots__/kanban.test.tsx.snap b/webapp/src/components/kanban/__snapshots__/kanban.test.tsx.snap
index 8bfe29ab7..ad8a9bbf8 100644
--- a/webapp/src/components/kanban/__snapshots__/kanban.test.tsx.snap
+++ b/webapp/src/components/kanban/__snapshots__/kanban.test.tsx.snap
@@ -174,7 +174,9 @@ exports[`src/component/kanban/kanban return kanban and change title on KanbanCol
             >
               i
             </div>
-            <div>
+            <div
+              class="octo-titletext"
+            >
               title
             </div>
           </div>
@@ -206,7 +208,9 @@ exports[`src/component/kanban/kanban return kanban and change title on KanbanCol
             >
               i
             </div>
-            <div>
+            <div
+              class="octo-titletext"
+            >
               title
             </div>
           </div>
@@ -249,7 +253,9 @@ exports[`src/component/kanban/kanban return kanban and change title on KanbanCol
             >
               i
             </div>
-            <div>
+            <div
+              class="octo-titletext"
+            >
               title
             </div>
           </div>
@@ -461,7 +467,9 @@ exports[`src/component/kanban/kanban return kanban and click on KanbanCalculatio
             >
               i
             </div>
-            <div>
+            <div
+              class="octo-titletext"
+            >
               title
             </div>
           </div>
@@ -493,7 +501,9 @@ exports[`src/component/kanban/kanban return kanban and click on KanbanCalculatio
             >
               i
             </div>
-            <div>
+            <div
+              class="octo-titletext"
+            >
               title
             </div>
           </div>
@@ -536,7 +546,9 @@ exports[`src/component/kanban/kanban return kanban and click on KanbanCalculatio
             >
               i
             </div>
-            <div>
+            <div
+              class="octo-titletext"
+            >
               title
             </div>
           </div>
@@ -748,7 +760,9 @@ exports[`src/component/kanban/kanban should match snapshot 1`] = `
             >
               i
             </div>
-            <div>
+            <div
+              class="octo-titletext"
+            >
               title
             </div>
           </div>
@@ -780,7 +794,9 @@ exports[`src/component/kanban/kanban should match snapshot 1`] = `
             >
               i
             </div>
-            <div>
+            <div
+              class="octo-titletext"
+            >
               title
             </div>
           </div>
@@ -823,7 +839,9 @@ exports[`src/component/kanban/kanban should match snapshot 1`] = `
             >
               i
             </div>
-            <div>
+            <div
+              class="octo-titletext"
+            >
               title
             </div>
           </div>
diff --git a/webapp/src/components/kanban/__snapshots__/kanbanCard.test.tsx.snap b/webapp/src/components/kanban/__snapshots__/kanbanCard.test.tsx.snap
index bcb963d2e..bfab09af3 100644
--- a/webapp/src/components/kanban/__snapshots__/kanbanCard.test.tsx.snap
+++ b/webapp/src/components/kanban/__snapshots__/kanbanCard.test.tsx.snap
@@ -116,7 +116,9 @@ exports[`src/components/kanban/kanbanCard return kanbanCard and click on copy li
       >
         i
       </div>
-      <div>
+      <div
+        class="octo-titletext"
+      >
         title
       </div>
     </div>
@@ -248,7 +250,9 @@ exports[`src/components/kanban/kanbanCard return kanbanCard and click on delete
       >
         i
       </div>
-      <div>
+      <div
+        class="octo-titletext"
+      >
         title
       </div>
     </div>
@@ -380,7 +384,9 @@ exports[`src/components/kanban/kanbanCard return kanbanCard and click on duplica
       >
         i
       </div>
-      <div>
+      <div
+        class="octo-titletext"
+      >
         title
       </div>
     </div>
@@ -425,7 +431,9 @@ exports[`src/components/kanban/kanbanCard should match snapshot 1`] = `
       >
         i
       </div>
-      <div>
+      <div
+        class="octo-titletext"
+      >
         title
       </div>
     </div>
@@ -456,7 +464,9 @@ exports[`src/components/kanban/kanbanCard should match snapshot with readonly 1`
       >
         i
       </div>
-      <div>
+      <div
+        class="octo-titletext"
+      >
         title
       </div>
     </div>
diff --git a/webapp/src/components/kanban/kanbanCard.scss b/webapp/src/components/kanban/kanbanCard.scss
index fa75e0ac1..20064b506 100644
--- a/webapp/src/components/kanban/kanbanCard.scss
+++ b/webapp/src/components/kanban/kanbanCard.scss
@@ -67,6 +67,15 @@
             width: 20px;
             height: 20px;
         }
+
+        .octo-titletext {
+            display: -webkit-box; // stylelint-disable-line
+            overflow: hidden;
+            text-overflow: ellipsis;
+            max-height: 100px;
+            -webkit-line-clamp: 5;
+            -webkit-box-orient: vertical; // stylelint-disable-line
+        }
     }
 
     .IconButton {
diff --git a/webapp/src/components/kanban/kanbanCard.tsx b/webapp/src/components/kanban/kanbanCard.tsx
index 8c8e8dab3..b5e471b5a 100644
--- a/webapp/src/components/kanban/kanbanCard.tsx
+++ b/webapp/src/components/kanban/kanbanCard.tsx
@@ -142,7 +142,12 @@ const KanbanCard = React.memo((props: Props) => {
 
                 <div className='octo-icontitle'>
                     { card.fields.icon ? <div className='octo-icon'>{card.fields.icon}</div> : undefined }
-                    <div key='__title'>{card.title || intl.formatMessage({id: 'KanbanCard.untitled', defaultMessage: 'Untitled'})}</div>
+                    <div
+                        key='__title'
+                        className='octo-titletext'
+                    >
+                        {card.title || intl.formatMessage({id: 'KanbanCard.untitled', defaultMessage: 'Untitled'})}
+                    </div>
                 </div>
                 {visiblePropertyTemplates.map((template) => (
                     <Tooltip