Added truncation to browe tile

wbraden · Aug 8, 2024 · b194bd3 · b194bd3
1 parent 091d1ec
commit b194bd3
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/Components/browseTile.js b/Components/browseTile.js
@@ -14,10 +14,10 @@ browseTileTemplate.innerHTML = `
             </div>
             <div class="content">
                 <div class="browse-tile-details">
-                    <p class="typography body md tcp">
+                    <p class="typography body md tcp truncate">
                         <slot name="label"></slot>
                     </p>
-                    <p class="typography body sm tcs">
+                    <p class="typography body sm tcs truncate">
                         <slot name="description"></slot>
                     </p>
                 </div>

diff --git a/css/main.css b/css/main.css
@@ -401,6 +401,12 @@ button {
   cursor: pointer;
 }
 
+.truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .typography.body {
   text-align: left;
   line-height: 1.5;

diff --git a/index.html b/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
     <link rel="stylesheet" href="css/main.css">