Plugins: Plugin card title cuts off with ellipsis

WordPress / wordpress.org

WordPress.org Meta, Git-ified. Synced from git://meta.git.wordpress.org/ This repository is just a mirror of the WordPress Meta subversion repository. Please include a link to a pre-existing ticket on https://meta.trac.wordpress.org/ with every pull request.

https://meta.trac.wordpress.org/

115 stars 146 forks source link

Plugins: Plugin card title cuts off with ellipsis #277

Closed ryelle closed 6 months ago

ryelle commented 6 months ago

When browsing the site, I noticed that sometimes the plugin title is cut off with an ellipsis, but there's still room for more of the title. For example, this one is called "UsersWP – Front-end login form, User Registration, User Profile & Members Directory plugin for WordPress", but it cuts off at the –

Same for this one "Better Messages – Live Chat for WordPress, BuddyPress, PeepSo, Ultimate Member, BuddyBoss"

I would expect to see more of the title before the ….

This is on Mac/Firefox, at full desktop size.

Perhaps this isn't an issue if title guidelines appear to prevent overly long titles?

ndiego commented 6 months ago

Hmm, I am not seeing this on Chrome/Safari.

ryelle commented 6 months ago

Yeah, I don't see it in Safari. It looks like this uses some webkit properties to get the line-clamp working. Putting display:block on the link fixes it for me:

StevenDufresne commented 6 months ago

I added display:block; since it fixes it and it makes logical sense for the element to have that display type.

StevenDufresne commented 6 months ago

Adding display:block; broke the outline mechanism on links for plugin cards. I've added a temporary underline for plugin cards. It's a bit of a mess because of the ellipsis implementation and some overflow hidden and forced heights. I think it's good enough for now based on the circumstances but the plugin cards should probably be rebuilt at some point.

Edit: Reference: https://wordpress.slack.com/archives/C02QB8GMM/p1714012269322099