From 76cdf695d4cbc1ffb3e6ff8284ea2677793e0cce Mon Sep 17 00:00:00 2001
From: Silas Meister <silas.meister@stud.h-da.de>
Date: Wed, 20 Sep 2023 15:53:43 +0200
Subject: [PATCH] Add ellipsis
---
index.html | 2 +-
styles.css | 6 ++++++
2 files changed, 7 insertions(+), 1 deletion(-)
diff --git a/index.html b/index.html
index 0fb75c8..1de7679 100644
--- a/index.html
+++ b/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>
diff --git a/styles.css b/styles.css
index e0cf171..a9e3854 100644
--- a/styles.css
+++ b/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 {
--
GitLab