N Ellipsis

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

PerformantEllipsis Props

Same as Ellipsis props. Available since version 2.35.0.

Ellipsis Slots

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