title text overflow ellipsis

Author: violetforest

src/pages/display/index.js

@@ -994,7 +994,7 @@ export default class Display extends Component {
                         <div className={styles.card}>
                           <div className={styles.cardText}>
                             <div>OBJKT#{nft.id}</div>
-                            <div>{nft.title}</div>
+                            <div className={styles.cardTitle}>{nft.title}</div>
                           </div>
                           <div className={styles.cardCollect}>
                             <Button onClick={() => this.collect(nft.id, nft.id)}>

src/pages/display/styles.module.scss

@@ -69,6 +69,12 @@
   opacity: 0;
 }
 
+.cardContainer {
+  .container {
+    min-height: 175px;
+  }
+}
+
 .cardContainer:hover .card {
   opacity: 1;
 }
@@ -78,6 +84,13 @@
   color: var(--background-color);
   margin-top: 20px;
   margin-left: 20px;
+  margin-right: 20px;
+}
+
+.cardTitle {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .cardCollect {