Truncated

CSS can clip text, but it can’t tell you that it did. truncated (element) reports --live-truncated-x when a line is cut by text-overflow: ellipsis and --live-truncated-y when a block overruns its height — both 1 / 0, recomputed via one shared ResizeObserver. Drag a box until the text fits and its flag flips off.

inline · resize →

Pack my box with five dozen liquid-juice jugstruncated-x

block · resize ↓

The brief said “just clip it,” and CSS did — quietly hiding the rest of this paragraph with no way for a stylesheet to know it ever happened.

truncated-y

Each box is bound to truncated, which writes --live-truncated-x / --live-truncated-y on it (scrollWidth > clientWidth and scrollHeight > clientHeight), recomputed via the shared ResizeObserver. Drag a box until the text fits and its flag flips to 0 — the cut CSS can clip but can’t otherwise detect.

The wiring

Bind the element whose overflow you care about; the flags land on it and inherit to its descendants, so a sibling label, an ::after, or a child control can read them:

<script type="module">import 'prop-for-that/auto'</script>

<p data-props-for="truncated"
   style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">…</p>

/* reveal a "show more" control only while the text is actually cut off */
.more { opacity: var(--live-truncated, 0); }

/* or, as a discrete state, switch a whole rule */
@container style(--live-truncated: 1) {
  .more { opacity: 1; }
}