Media Library: third line of a caption is cut off

[nbachiyski]

Steps to reproduce:

1. Add an image with a long caption (I started a playground using ​Anne's link from ​her post)
2. Visit /wp-admin/upload.php, make sure we're in grid view
3. Observe the third line of each caption a little bit cut off. See the screenshot attached.

I would expect that we don't see the third line at all

[nbachiyski]

screenshot

[sainathpoojary]

Reproduction Report

Environment

• WordPress: 7.1-alpha-62161-src
• Subdirectory: No
• PHP: 8.3.30
• Server: nginx/1.31.1
• Database: mysqli (Server: 9.7.1 / Client: mysqlnd 8.3.30)
• Browser: Chrome 151.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.4
• Plugins: None

Steps taken

1. Uploaded the image in the wp-admin/upload.php
2. Update the title of the image with longer text
3. Set the grid mode
4. Observed that the issue occurred (the third line of the caption is partially cut off).

Expected behavior

The third line of the image caption should not be visible at all, rather than being partially cut off.

Screenshots/Screencast with results

[sainathpoojary]

Took a quick look into this and it seems like the issue is coming from src/wp-includes/css/media-views.css.

Right now, the ::after pseudo-element for the caption overlay has max-height: 3rem (48px) and some padding, but no explicit line-height set. Because browsers generally default to a line-height of around 1.2 on 12px fonts, there's only really space for about 2.6 lines of text. That's why that 3rd line is kinda peeking through before overflow: hidden does its job.

I think if we just define an explicit line-height and calc the max-height based on exactly two lines plus the padding, it should cleanly cut off.

Something like this worked on my end:

.wp-core-ui .attachment:not(:has(.filename))::after {
    line-height: 1.5;                       
    max-height: calc( 2 * 1.5em + 10px ); 
}

Let me know if this makes sense or if im missing any edge cases here!

In the Media Library grid, a long image label shows two full lines plus the clipped top of a third.

The overlay is a ::after on the grid item, clamped with max-height: 3rem while keeping 5px of vertical padding. Overflow is clipped at the padding box rather than the content box, so that padding is exactly where the third line shows through. The patch sets a line height on the overlay, drops the vertical padding, and clamps to two line boxes, so the clip edge always falls between lines.

The leading now supplies the spacing, and the overlay is 6px shorter.

## Use of AI Tools

AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 5
Used for: Locating the rule, measuring the clipping behaviour in the browser, and comparing candidate clamps. All changes were reviewed and validated by me.

@itzmekhokan The patch seems to be working fine. I tested it in WP Playground.