Vben EllipsisText 省略文本

EllipsisText 用于展示超长文本，支持省略、Tooltip 提示以及点击展开收起。

如果文档内没有覆盖到你需要的细节，可以结合在线示例一起查看。

基础用法

通过默认插槽提供文本内容，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>

可折叠文本

通过 line 设置折叠后的最大行数，通过 expand 开启点击展开与收起。

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 :line="3" expand>{{ text }}</EllipsisText>
</template>

自定义提示浮层

通过 tooltip 插槽自定义提示内容。

vue

<script lang="ts" setup>
import { EllipsisText } from '@vben/common-ui';
</script>
<template>
  <EllipsisText :max-width="240">
    住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪
    <template #tooltip>
      <div style="text-align: center">
        《秦皇岛》<br />住在我心里孤独的<br />孤独的海怪 痛苦之王<br />开始厌倦
        深海的光 停滞的海浪
      </div>
    </template>
  </EllipsisText>
</template>

通过 tooltip-when-ellipsis 控制仅在文本被截断时显示 Tooltip。

vue

<script lang="ts" setup>
import { EllipsisText } from '@vben/common-ui';

const text = `
Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。
`;
</script>
<template>
  <EllipsisText :line="2" :tooltip-when-ellipsis="true">
    {{ text }}
  </EllipsisText>

  <EllipsisText :line="3" :tooltip-when-ellipsis="true">
    {{ text }}
  </EllipsisText>
</template>

API

Props

属性名	描述	类型	默认值
expand	是否支持点击展开或收起	`boolean`	`false`
line	文本最大显示行数	`number`	`1`
maxWidth	文本区域最大宽度	`number \| string`	`'100%'`
placement	提示浮层位置	`'bottom' \| 'left' \| 'right' \| 'top'`	`'top'`
tooltip	是否启用文本提示	`boolean`	`true`
tooltipWhenEllipsis	是否仅在文本被截断时显示提示	`boolean`	`false`
ellipsisThreshold	文本截断检测阈值，值越大判定越严格	`number`	`3`
tooltipBackgroundColor	提示背景色	`string`	`''`
tooltipColor	提示文字颜色	`string`	`''`
tooltipFontSize	提示文字大小，单位 `px`	`number`	`14`
tooltipMaxWidth	提示内容最大宽度，单位 `px`	`number`	-
tooltipOverlayStyle	提示内容区域样式	`CSSProperties`	`{ textAlign: 'justify' }`

Events

事件名	描述	类型
expandChange	展开状态变化时触发	`(isExpand: boolean) => void`

Slots

插槽名	描述
tooltip	开启文本提示时，用于自定义提示内容

贡献者

sqchen

xingyu4j

panda7

Netfan

页面历史

最后编辑于 11 天前

查看完整历史

Vben EllipsisText 省略文本 ​

基础用法 ​

可折叠文本 ​

自定义提示浮层 ​

仅在省略时显示 Tooltip ​

API ​

Props ​

Events ​

Slots ​

贡献者