useHasContentOverflow

Detects whether an element's rendered content is being clipped horizontally or vertically.

Detects whether an element's rendered content extends beyond the element's box, horizontally or vertically.

Unlike useHasOverflow, which compares integer scrollWidth/scrollHeight against clientWidth/clientHeight, this hook measures the rendered content with a Range and compares fractional bounding rects directly. That avoids the false positives useHasOverflow produces at non-100% browser zoom, on high-DPI displays, or with sub-pixel layouts.

Use it to drive truncation tooltips on Table.CellContent, Table.ColumnHeaderTitle, Text, and similar elements where you need to know whether the text is being clipped. Use useHasOverflow when you need to know whether a container has scrollable content.

If the truncating element has a CSS border, the hook may report no overflow even while content is being clipped by a few pixels — overflow: hidden clips inside the border, but the hook measures up to the outside of it. Apply the border to a wrapping element instead.

Import#

import { useHasContentOverflow } from '@volue/wave-react';

Example#

Non-text content#

The hook measures the bounding rect of all rendered child content via a Range, so it works for elements containing icons, child blocks, or mixed inline content — not just text.

API Reference#

Arguments#

Prop	Type	Default
`observeMutations`	`boolean`	`false`
`mutationOptions`	`MutationObserverInit`	`{ characterData: true, childList: true }`

Returns#

[setElement: (el: T | null) => void, hasHorizontalOverflow: boolean, hasVerticalOverflow: boolean] — A tuple with a ref callback and two booleans indicating whether content is clipped horizontally or vertically.