From 34cc1cd2177a6ffcfd509fc8dfef46aeacee1c3a Mon Sep 17 00:00:00 2001
From: Jason Yeo <jason.yeo@pacom.mil>
Date: Thu, 25 Jan 2024 15:08:30 -1000
Subject: [PATCH] added truncating styling and applied to title and text
 elements

---
 src/webparts/betterHero/BetterHeroWebPart.module.scss | 8 +++++++-
 src/webparts/betterHero/BetterHeroWebPart.ts          | 4 ++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/webparts/betterHero/BetterHeroWebPart.module.scss b/src/webparts/betterHero/BetterHeroWebPart.module.scss
index 8634edc..8201dd5 100644
--- a/src/webparts/betterHero/BetterHeroWebPart.module.scss
+++ b/src/webparts/betterHero/BetterHeroWebPart.module.scss
@@ -39,7 +39,13 @@
 }
 */
 
-
+  .textTruncate {
+    /* Truncate the text on the title or text of the card */
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+  }
 
   .cardHideOverflow {
     /* Hide overflow to keep the zoom within the card */
diff --git a/src/webparts/betterHero/BetterHeroWebPart.ts b/src/webparts/betterHero/BetterHeroWebPart.ts
index a0ed1a7..a15e9fe 100644
--- a/src/webparts/betterHero/BetterHeroWebPart.ts
+++ b/src/webparts/betterHero/BetterHeroWebPart.ts
@@ -92,8 +92,8 @@ export default class BetterHeroWebPart extends BaseClientSideWebPart<IBetterHero
                <div class="card bg-dark text-white" style="overflow: hidden;">
                   <img src="${imageInfo.image}" class="card-img ${styles.leaderPhoto}" alt="${imageInfo.title}">
                   <div class="card-img-overlay ${styles.cardImgOverlay}">
-                        <h5 class="card-title">${imageInfo.title}</h5>
-                        <p class="card-text">${imageInfo.subtitle || ''}</p>
+                        <h5 class="card-title ${styles.textTruncate}">${imageInfo.title}</h5>
+                        <p class="card-text ${styles.textTruncate}">${imageInfo.subtitle || ''}</p>
                   </div>    
                </div>             
             </a>