Add ellipsis

index.html

@@ -102,7 +102,7 @@
 
                         <img class="article-image" src="img/astronaut.jpg" alt="" />
 
-                        <div class="article-content overlay">
+                        <div class="article-content">
                             <div class="overlay">
                                 <h4 class="overlay-title">Expedition 48</h4>
                                 <h4 class="overlay-description">NASA's Record-braking Astronaut Crewmates Safely Return to Earth. Here is some additional information to the article where you can read more!</h4>

styles.css

@@ -364,6 +364,8 @@ main {
     justify-content: flex-start;
     align-items: flex-start;
     position: absolute;
+    width: 100%;
+    height: auto;
     bottom: 0;
     left: 0;
 }
@@ -386,6 +388,9 @@ main {
     max-height: 2.9rem;
     line-height: 1.1rem;
     overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: 100%;
     color: #111111;
     font-size: 0.9rem;
     flex: 1 1 auto;
@@ -394,6 +399,7 @@ main {
 .overlay > .overlay-description:hover {
     max-height: 100%;
     overflow: visible;
+    white-space: normal;
 }
 
 .nasa-launch {