layer5io / layer5

Layer5, expect more from your infrastructure
https://layer5.io
Apache License 2.0
880 stars 1.23k forks source link

Added ellipsis in card #6053

Closed NishantSinghhhhh closed 3 weeks ago

NishantSinghhhhh commented 3 weeks ago

Description This CSS update enforces a multi-line ellipsis on text within .card .text, ensuring it displays up to a specified number of lines (i.e. 3) before truncating. The ellipsis will appear at the end of the last visible line, hiding any content that extends beyond this point.

Details

1). Sets display: -webkit-box with -webkit-line-clamp: 3 to limit text display to three lines. 2). Adds overflow: hidden and text-overflow: ellipsis to manage overflow and apply an ellipsis (...) at the end of the visible lines.

==> Notes for Reviewers 1). Adjust the line-height and -webkit-line-clamp values as needed for different line limits. 2). Ensure compatibility with WebKit browsers, as -webkit-line-clamp may not work in non-WebKit environments.

Screenshot 2024-11-02 122201

Signed commits

l5io commented 3 weeks ago

🚀 Preview for commit db51dab270d8dcc67d93d38f42ba4781a212db93 at: https://6725cf10d4550a43be1423c7--layer5.netlify.app

l5io commented 3 weeks ago

🚀 Preview for commit e1f1bd9595052126467c1ee3966c0057dbd5f756 at: https://6726555a2a603eba4f801e1a--layer5.netlify.app

vishalvivekm commented 3 weeks ago

@NishantSinghhhhh Let's discuss this on websites call on Monday at 6:30 PM IST (7:00 AM CT). Add it as an agenda item to the meeting minutes, if you would :)

NishantSinghhhhh commented 3 weeks ago

Sure Sir

NishantSinghhhhh commented 3 weeks ago

Sure Sir

NishantSinghhhhh commented 3 weeks ago

@NishantSinghhhhh have you checked these changes not effecting badly somewhere else if this card would have been reused somewhere?

Yes sir , I just did this, it was working fine

l5io commented 3 weeks ago

🚀 Preview for commit 8de89d2f2a3c2af830fa81434d4ade5529ed6c94 at: https://67279ec6388ea8539a5763df--layer5.netlify.app