Ellipsis 文本省略

MoEllipsis 用于处理文本过长时的省略展示。它不区分明暗主题，也不内置字体颜色；宽度跟随父元素，颜色、字号、行高都可以直接通过外部 class 控制。

单行省略

Light

这是一段很长的文本内容，会根据父元素宽度自动截断并显示省略号。

Dark

这是一段很长的文本内容，会根据父元素宽度自动截断并显示省略号。

<div style="width: 220px">
  <MoEllipsis text="这是一段很长的文本内容，会根据父元素宽度自动截断并显示省略号。" />
</div>

多行省略

Light

Mojo UI 是面向业务后台、管理系统和工具型产品的 Vue 3 组件库。这里展示两行文本省略效果，超过两行后会自动显示省略号。

Dark

Mojo UI 是面向业务后台、管理系统和工具型产品的 Vue 3 组件库。这里展示两行文本省略效果，超过两行后会自动显示省略号。

<MoEllipsis :lines="2">
  Mojo UI 是面向业务后台、管理系统和工具型产品的 Vue 3 组件库。
</MoEllipsis>

根据父元素宽度

Light

父元素较窄时，文本会更早显示省略号。

父元素较宽时，同一段文本可以展示更多内容，然后再显示省略号。

Dark

父元素较窄时，文本会更早显示省略号。

父元素较宽时，同一段文本可以展示更多内容，然后再显示省略号。

<div class="title-cell">
  <MoEllipsis>父元素决定最终可展示宽度</MoEllipsis>
</div>

外部样式控制

Light

颜色、字号、行高和标签类型都可以交给业务侧 class 控制，组件只处理省略逻辑。

Dark

颜色、字号、行高和标签类型都可以交给业务侧 class 控制，组件只处理省略逻辑。

<MoEllipsis class="text-primary" :lines="2" as="p">
  颜色、字号、行高和标签类型都可以交给业务侧 class 控制。
</MoEllipsis>

API

参数	说明	类型	默认值
text	文本内容，也可以使用默认插槽传入	string | number	""
lines	最大展示行数，超过后显示省略号	number	1
as	渲染的标签名	string	span

Slots

插槽	说明
default	自定义文本内容