Description
Clear and concise description of the problem
As a developer using VueUse I want to be able to easy detect if on a HTML Element is Trucationated.
With a boolean value i can then easy add other functionatily.
As Example:
If the HTML Element is Truncated add a on hover popover where you see the full text.
If its not Truncated there is no need for the popover since the user already sees the full text.
Suggested solution
import { ComputedRef, Ref, computed } from 'vue'
export function useTruncDetection(
element: Ref<HTMLElement | null>,
): ComputedRef<boolean> {
return computed(() => {
if (!element.value) return false
return element.value?.offsetWidth < element.value?.scrollWidth
})
}Alternative
No response
Additional context
So what i mean is if the 3 dots ... are there or not: https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
Validations
- Follow our Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
Metadata
Metadata
Assignees
Labels
Type
Projects
<
349C
span class="ProjectsSections-module__ListFieldWrapper--PEW6b">
Status
No status