Master Flexible Overflow: CSS Tricks for Adaptive Text Without JavaScript

Overflow handling is familiar to CSS developers, but this piece introduces a "flexible overflow" technique that goes beyond simple truncation or ellipsis.

Inspired by a blog post from @kizmarh, the author demonstrates a demo where shrinking the container or toggling a checkbox reveals distinct visual outcomes.

Rather than relying solely on media queries or JavaScript, the solution uses Container Queries (the evolution of Element Queries ) and polyfills where possible, while acknowledging that polyfills are not a long‑term answer.

The core implementation consists of two elements inside an overflower container: overflower‑short for short text and overflower‑long for long text. The short element uses aria‑hidden and title to improve accessibility.

By setting the outer container to display:inline‑flex with flex‑wrap:wrap, the short and long texts receive different styles. For browsers that support flex‑wrap, flex‑grow:1 and text‑overflow:ellipsis handle the short text, while flex‑basis:100% forces the long text onto a new line. Fixed height and matching line‑height keep the text vertically centered.

If flex‑wrap is not supported, a fallback uses text‑overflow:ellipsis and white‑space on the outer container, hiding the short text.

The approach demonstrates progressive enhancement with @supports: browsers that understand the modern flex properties get the full flexible overflow experience, others receive a graceful degradation.

While the technique adds extra markup, it showcases CSS’s power to create responsive, accessible UI without JavaScript, though it does increase HTML redundancy.

In summary, by combining Flexbox features, container‑size‑aware markup, and accessibility attributes, developers can achieve a flexible overflow effect that adapts to container dimensions and improves user experience.

Source: 大漠 – https://www.w3cplus.com/css/flexible-overflow.html