---
title: "useOverflowDetection"
description: "A Vue composable that detects truncated text via ResizeObserver and MutationObserver, supporting single-line ellipsis and multi-line clamping."
canonical_url: "https://core.mhaibaraai.cn/en/docs/composables/use-overflow-detection"
---
# useOverflowDetection

> A Vue composable that detects truncated text via ResizeObserver and MutationObserver, supporting single-line ellipsis and multi-line clamping.

## Usage

`useOverflowDetection` detects whether an element's text content is truncated (typical cases: table cell ellipsis, card title multi-line clamping) and automatically re-checks when the size or content changes.

It automatically selects the measurement strategy based on the element's `computed style`:

- `display: -webkit-box` + `webkit-line-clamp` → multi-line mode, measures height with a vertical probe
- `white-space: nowrap` + `text-overflow: ellipsis` → single-line mode, measures width with a horizontal probe
- Other cases → compares both `scroll*` and `client*`

Callers only need to apply the correct truncate / line-clamp CSS to the element; no additional configuration is required.

```vue
<script setup lang="ts">
import { useOverflowDetection } from '@movk/core'
import { useTemplateRef } from 'vue'

const cellRef = useTemplateRef<HTMLDivElement>('cellRef')
const { overflowed, overflowX, overflowY } = useOverflowDetection(cellRef)
</script>

<template>
  <UTooltip :disabled="!overflowed" :text="text">
    <div ref="cellRef" class="truncate">
      {{ text }}
    </div>
  </UTooltip>
</template>
```

> [!NOTE]
> 
> Calling this in an SSR environment is safe: 
> 
> check()
> 
>  detects whether 
> 
> window
> 
>  exists and returns early if not, keeping the reactive state at its initial 
> 
> false
> 
>  value.

## API

### `useOverflowDetection(target, options?)`

### Parameters

**target** (`MaybeComputedElementRef<HTMLElement | null | undefined>`) *required*: The target element reference, supports ref / template ref / getter.

**options** (`UseOverflowDetectionOptions`): Optional configuration.

#### `UseOverflowDetectionOptions`

**observeContent** (`boolean`): Whether to observe content changes (MutationObserver). Can be set to false for static content to reduce overhead.

### Returns

**overflowed** (`ComputedRef<boolean>`): Whether overflow occurs in any direction (= overflowX || overflowY).

**overflowX** (`Readonly<Ref<boolean>>`): Whether the content is truncated horizontally.

**overflowY** (`Readonly<Ref<boolean>>`): Whether the content is truncated vertically.

**check** (`() => void`): Manually triggers a re-detection.

## Changelog

See commit history for [src/composables/useOverflowDetection.ts](https://github.com/mhaibaraai/movk-core/commits/main/src/composables/useOverflowDetection.ts).

---

- [GitHub](https://github.com/mhaibaraai/movk-core/blob/main/src/composables/useOverflowDetection.ts)


## Sitemap

See the full [sitemap](https://core.mhaibaraai.cn/sitemap.md) for all pages.