Make ellipsis work on career card quotes

hlxsites · Sep 28, 2023 · bc1aa22 · bc1aa22
1 parent fedfa7a
commit bc1aa22
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/blocks/career-carousel/career-carousel.css b/blocks/career-carousel/career-carousel.css
@@ -60,12 +60,21 @@
   color: var(--primary);
   font-size: 19px;
   font-style: normal;
-  height: 9.375rem;
   line-height: 29px;
   margin: 0 0 19px;
+  max-height: 9.375rem;
   overflow: hidden;
   text-indent: 0;
-  text-overflow: ellipsis;
+
+  /* Show ellipsis on multiline text */
+  display: -webkit-box;
+  -webkit-line-clamp: 5; /* number of lines to show */
+  -webkit-box-orient: vertical;
+}
+
+.career-carousel .career-card .career-card-bqc {
+  height: 9.375rem;
+  margin-bottom: 12px;
 }
 
 .career-carousel .career-card h6 {

diff --git a/blocks/career-carousel/career-carousel.js b/blocks/career-carousel/career-carousel.js
@@ -75,9 +75,12 @@ export default async function decorate(block) {
     const pic = createOptimizedPicture(data[i].image, data[i].pagename);
     a.append(pic);
 
+    const bqc = document.createElement('div');
+    bqc.classList.add('career-card-bqc');
     const bq = document.createElement('blockquote');
     bq.textContent = data[i]['career-quote'];
-    a.append(bq);
+    bqc.append(bq);
+    a.append(bqc);
 
     const nm = document.createElement('h6');
     nm.textContent = data[i].pagename;