Vben EllipsisText
EllipsisText displays long text with truncation, tooltip support, and optional expand/collapse behavior.
Basic Usage
Pass the text through the default slot and limit the visual width with maxWidth.
vue
<script lang="ts" setup>
import { EllipsisText } from '@vben/common-ui';
const text = `
Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。
`;
</script>
<template>
<EllipsisText :max-width="500">{{ text }}</EllipsisText>
</template>Current Props
| Prop | Description | Type | Default |
|---|---|---|---|
expand | allow click-to-expand behavior | boolean | false |
line | max visible line count | number | 1 |
maxWidth | max width of the text area | number | string | '100%' |
placement | tooltip placement | 'bottom' | 'left' | 'right' | 'top' | 'top' |
tooltip | enable tooltip | boolean | true |
tooltipWhenEllipsis | only show tooltip when text is actually truncated | boolean | false |
ellipsisThreshold | pixel threshold used when checking truncation | number | 3 |
tooltipBackgroundColor | tooltip background color | string | '' |
tooltipColor | tooltip text color | string | '' |
tooltipFontSize | tooltip font size in px | number | 14 |
tooltipMaxWidth | tooltip max width in px | number | - |
tooltipOverlayStyle | tooltip content style | CSSProperties | { textAlign: 'justify' } |
Events
| Event | Description | Type |
|---|---|---|
expandChange | fired when expand state changes | (isExpand: boolean) => void |
Slots
| Slot | Description |
|---|---|
tooltip | custom tooltip content |
xingyu4j