n-ellipsis

name	n-ellipsis
description	Text ellipsis component for truncating long text with tooltip support. Invoke when user needs to handle text overflow, multi-line truncation, or expandable text in Naive UI.
metadata	{"author":"jiaiyan","version":"1.0.0"}

Naive UI Ellipsis Component

Text truncation component that handles overflow with tooltip and expand functionality.

When to Use

Use this component when:

• Text overflow: Truncate long text that exceeds container width
• Multi-line truncation: Limit text to specific number of lines
• Expandable content: Allow users to expand truncated text on click
• Tooltip preview: Show full content in tooltip on hover

When to Invoke

Invoke this skill when:

• User needs to truncate long text strings
• User wants multi-line text ellipsis with line-clamp
• User needs expandable text with click trigger
• User wants custom tooltip content for truncated text
• User has performance concerns with many ellipsis instances

Features

• Single Line Ellipsis: Basic text truncation with default tooltip
• Line Clamp: Multi-line text truncation (check browser compatibility)
• Expand Trigger: Click to expand truncated text
• Custom Tooltip: Customize tooltip content via slot
• Performant Variant: n-performant-ellipsis for better render performance

API Reference

Ellipsis Props

Name	Type	Default	Description
expand-trigger	'click'	undefined	Trigger event to expand truncated text to full content.
line-clamp	number | string	undefined	Maximum number of lines to display.
tooltip	boolean | TooltipProps	true	Tooltip properties or disable tooltip.

PerformantEllipsis Props

Same as Ellipsis props. Available since version 2.35.0.

Ellipsis Slots

Name	Parameters	Description
default	()	The content to be truncated.
tooltip	()	Custom tooltip content.

Basic Usage

Single Line Ellipsis

<template>
  <n-ellipsis style="max-width: 240px">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium, totam rem aperiam
  </n-ellipsis>
</template>

Multi-line Ellipsis (Line Clamp)

<template>
  <n-ellipsis :line-clamp="2">
    Lorem ipsum dolor sit amet,<br />
    consectetur adipiscing elit,<br />
    sed do eiusmod tempor incididunt<br />
    ut labore et dolore magna aliqua.<br />
    Ut enim ad minim veniam,<br />
    quis nostrud exercitation ullamco
  </n-ellipsis>
</template>

Expandable Text

<template>
  <n-ellipsis expand-trigger="click" line-clamp="2" :tooltip="false">
    Lorem ipsum dolor sit amet,<br />
    consectetur adipiscing elit,<br />
    sed do eiusmod tempor incididunt<br />
    ut labore et dolore magna aliqua.<br />
    Ut enim ad minim veniam,<br />
    quis nostrud exercitation ullamco
  </n-ellipsis>
</template>

Custom Tooltip Content

<template>
  <n-ellipsis style="max-width: 240px">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium, totam rem aperiam
    <template #tooltip>
      <div style="text-align: center">
        <i>Lorem Ipsum</i><br />
        Sed ut perspiciatis unde omnis<br />
        iste natus error sit voluptatem accusantium doloremque laudantium,<br />
        totam rem aperiam
      </div>
    </template>
  </n-ellipsis>
</template>

Performant Ellipsis

<template>
  <n-performant-ellipsis style="max-width: 240px">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium, totam rem aperiam
  </n-performant-ellipsis>
</template>

Common Patterns

In Table Cells

<template>
  <n-data-table :columns="columns" :data="data" />
</template>

<script setup>
import { h } from 'vue';
import { NEllipsis } from 'naive-ui';

const columns = [
  {
    title: 'Description',
    key: 'description',
    render(row) {
      return h(
        NEllipsis,
        { style: 'max-width: 200px' },
        { default: () => row.description },
      );
    },
  },
];
</script>

With Dynamic Max Width

<template>
  <n-ellipsis :style="{ maxWidth: maxWidth + 'px' }">
    {{ longText }}
  </n-ellipsis>
</template>

<script setup>
import { ref } from 'vue';

const maxWidth = ref(200);
const longText = 'Very long text content here...';
</script>

Tooltip with Rich Content

<template>
  <n-ellipsis style="max-width: 300px">
    {{ truncatedContent }}
    <template #tooltip>
      <n-card size="small" :bordered="false">
        <n-text strong>{{ title }}</n-text>
        <n-p>{{ fullContent }}</n-p>
      </n-card>
    </template>
  </n-ellipsis>
</template>

Best Practices

1. Set max-width: Always set a max-width or width constraint for single-line ellipsis

   <n-ellipsis style="max-width: 200px">Long text...</n-ellipsis>
   

2. Use line-clamp for multi-line: Combine with line-clamp for paragraph truncation

   <n-ellipsis :line-clamp="3">Multi-line content...</n-ellipsis>
   

3. Disable tooltip when expanding: Set :tooltip="false" when using expand-trigger

   <n-ellipsis expand-trigger="click" :tooltip="false" :line-clamp="2">
     Content...
   </n-ellipsis>
   

4. Use performant variant for lists: Use n-performant-ellipsis when rendering many instances

   • Note: Inner components may unmount/remount, use carefully

5. Check browser compatibility: Line-clamp may not work in all browsers

   • See caniuse for compatibility

6. Custom tooltip for formatted content: Use the tooltip slot for rich formatting