# 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`](/hooks/use-has-overflow), 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`](/hooks/use-has-overflow) when you need to know whether a container has scrollable content.

<Callout variant="important">

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.

</Callout>

## Import

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

## Example

```jsx
() => {
  const [setElement, hasHorizontalOverflow, hasVerticalOverflow] =
    useHasContentOverflow();
  const [nowrap, setNowrap] = React.useState(false);

  return (
    <Flex flow="column">
      <Flex flow="column" gap="none">
        <Text>{`Horizontal overflow: ${hasHorizontalOverflow ? '✅' : '❌'}`}</Text>
        <Text>{`Vertical overflow: ${hasVerticalOverflow ? '✅' : '❌'}`}</Text>
      </Flex>
      <Box
        key={nowrap ? 'nowrap' : 'wrap'}
        ref={setElement}
        padding="spacingS"
        css={{
          width: 200,
          height: 60,
          background: '$backgroundNeutralModerate',
          overflow: 'hidden',
          whiteSpace: nowrap ? 'nowrap' : 'normal'
        }}
      >
        <Text>
          {
            'This is a long text that will overflow the container both horizontally and vertically to demonstrate the hook behavior.'
          }
        </Text>
      </Box>
      <Switch.Root isActive={nowrap} onIsActiveChange={setNowrap}>
        <Switch.Label>{'white-space: nowrap'}</Switch.Label>
        <Switch.Indicator />
      </Switch.Root>
    </Flex>
  );
};
```

### 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.

```jsx
() => {
  const [setElement, hasHorizontalOverflow] = useHasContentOverflow();

  return (
    <Flex flow="column" gap="spacingS">
      <Text>{`Horizontal overflow: ${hasHorizontalOverflow ? '✅' : '❌'}`}</Text>
      <Flex
        ref={setElement}
        gap="spacingS"
        padding="spacingM"
        css={{
          width: 200,
          minWidth: 40,
          maxWidth: '100%',
          background: '$backgroundNeutralModerate',
          overflow: 'hidden',
          resize: 'horizontal'
        }}
      >
        {Array.from({ length: 8 }, (_, i) => (
          <FlexItem
            key={i}
            flex="none"
            css={{
              width: '$32',
              height: '$32',
              borderRadius: '$xs',
              background: '$backgroundNeutral'
            }}
          />
        ))}
      </Flex>
    </Flex>
  );
};
```

---

## API Reference

### Arguments

| Name               | Type                   | Default                                    | Description                                                                                                                                                                                                   | Required |
| ------------------ | ---------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| `observeMutations` | `boolean`              | `false`                                    | Whether to observe DOM mutations to recheck overflow.                                                                                                                                                         |          |
| `mutationOptions`  | `MutationObserverInit` | `{ characterData: true, childList: true }` | Configuration for the [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) when `observeMutations` is `true`. By default, it observes character data and child list changes. |          |

### 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.