From e8d3b3cdd6ddb0187c3d8515d33c28839c7ee583 Mon Sep 17 00:00:00 2001 From: pbc1017 Date: Mon, 18 Mar 2024 14:01:08 +0900 Subject: [PATCH] :lipstick: club list element ui --- .../components/club/ClubListElement/style.css | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/front/src/components/club/ClubListElement/style.css b/front/src/components/club/ClubListElement/style.css index 8e3a257..766746e 100644 --- a/front/src/components/club/ClubListElement/style.css +++ b/front/src/components/club/ClubListElement/style.css @@ -30,11 +30,12 @@ .club-list-element .frame { align-items: center; - display: inline-flex; + display: flex; /* Updated from inline-flex to flex */ gap: 11px; left: 24px; position: absolute; top: 18px; + right: 120px; /* Ensure there's space on the right */ } .club-list-element .MUSE { @@ -108,3 +109,16 @@ letter-spacing: 0; line-height: normal; } + +.club-list-element .MUSE, +.club-list-element .text-wrapper-4 { + white-space: nowrap; + overflow: hidden; /* Added to prevent overflow */ + text-overflow: ellipsis; /* Added to show ellipsis (...) when text overflows */ +} + +/* Add a specific max-width or use flex to the .text-wrapper-4 to ensure it doesn't exceed its parent's width. */ +.club-list-element .text-wrapper-4 { + flex-grow: 1; /* Allows the div to grow and fill available space, but not exceed */ + max-width: calc(100% - 100px); /* Example: adjust the max-width as needed */ +}