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 probewhite-space: nowrap+text-overflow: ellipsis→ single-line mode, measures width with a horizontal probe- Other cases → compares both
scroll*andclient*
Callers only need to apply the correct truncate / line-clamp CSS to the element; no additional configuration is required.
<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>
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
No recent changes
useInfiniteScrollBinding
A Vue composable wrapping VueUse useInfiniteScroll, adding a reactive canLoadMore guard so you control exactly when more items are fetched.
isArray
A TypeScript type guard that checks whether a value is an array, narrowing the type so you can safely access array methods in your code.