Merge pull request #6 from butugruv/mod-1

added truncating styling and applied to title and text elements
Yng808 · Jan 26, 2024 · 6a14bb1 · 6a14bb1
2 parents 2d02094 + 34cc1cd
commit 6a14bb1
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git 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
@@ -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>