跳转到内容

文本省略 Ellipsis

默认按单行省略处理,适合表格单元格、列表标题等横向空间有限的场景。

通过 line-clamp 指定最大展示行数,超出部分将按多行截断。

通过 expand-trigger="click" 开启点击展开与收起。关闭 tooltip 后,会退回到原生 title 提示。

tooltip 属性可传入 Tooltip 配置,tooltip 插槽可自定义完整提示内容。

sd-performant-ellipsis 适合大量列表项同时渲染的场景。它会先以纯 CSS 省略形式输出,等用户真正交互后再切换到完整的 sd-ellipsis 能力,因此首屏渲染开销更低,但内部节点会在激活时重新挂载。

如果你正在把 naive-uiNEllipsisNPerformantEllipsis 迁移到当前组件库,可以直接参考 guides/naive-ui-migration.mdx

当前这次迁移已经对齐了以下能力:

  • 单行省略与多行省略
  • 点击展开
  • tooltip 插槽自定义提示内容
  • 高性能渲染版本 sd-performant-ellipsis

常见替换关系如下:

Naive UISD Design Vue
n-ellipsissd-ellipsis
n-performant-ellipsissd-performant-ellipsis

如果业务代码里需要显式导入组件,也可以直接导入 EllipsisPerformantEllipsis 组件使用。

参数名描述类型默认值
line-clamp最大显示行数。不传时为单行省略number | string-
expand-trigger展开的触发方式'click'-
tooltip省略时是否展示提示。可传入 Tooltip 属性boolean | EllipsisTooltipPropstrue
插槽名描述参数
default默认内容-
tooltip自定义提示内容-