Using Container Queries in a CSS Grid to Detect Truncation
Stage 1: Detecting Wrap via Row Height
When text in cell 1 wraps, it increases the grid row height. Cell 2 uses container-type: size so we can use a container query to detect when its height exceeds one line. Middle cell is blue when NOT wrapping, green when IS wrapping.
Stage 2: Red Bounding Box (Single Line Height, Overflow Visible)
The red border overlays the entire grid at exactly one line height. Wrapped text spills outside.
Stage 3: Red Bounding Box (Single Line Height, Overflow Hidden)
Same as Stage 2, but with overflow hidden. The bounding box clips the grid content.
Stage 4: No Borders (Clean Implementation)
Same clipping behavior as Stage 3, but without any visible borders.
Stage 5: 1px Indicator Overlapping Cell 1
The indicator cell is now 1px wide and shifted left to overlap cell 1, leaving 0px gap between cells 1 and 3. A colored line is still visible but takes up no width.
Stage 6: Fade Mask When Wrapping
Transparent when NOT wrapping. When wrapping, shows a 12px gradient fade that masks text underneath. The 12px cell overlaps cell 1 so it takes up no width.
Stage 7: Fit-Content Cell 1, Auto Cell 3
Cell 1 uses minmax(0, max-content) so it shrinks when needed but grows to fit content. Cell 3 has no max-width, so all content is left-aligned with extra space on the right. When container is too narrow, cell 1 wraps and the fade effect engages.
Stage 8: Stacked Text Layers (No Character Jumping)
Cell 1 has two text layers stacked. The bottom layer never wraps and is clipped at the edge. The top layer wraps normally. This prevents characters from "jumping away" as they wrap - the bottom layer maintains character visibility through to the edge.