skills.rest
jiaiyan
jiaiyanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

n-ellipsis

Truncate long text with line-clamp, tooltip preview, and expandable content in Naive UI components.

8|3|Updated Mar 13, 2026
Search Tags:#text-truncation#ui-component#naive-ui#tooltip#expandable#ellipsis#multi-line
One-click install
npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-ellipsis
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: n-ellipsis
Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-ellipsis
Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-ellipsis

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Text overflowing in UI layouts often breaks design; n-ellipsis provides truncation with tooltip preview and optional expansion to reveal full content.

Core Features & Use Cases

  • Single Line Ellipsis: truncate a single line of text with a default tooltip.
  • Line Clamp: multi-line truncation with configurable line count.
  • Expand Trigger: click or programmatic trigger to reveal hidden content.
  • Custom Tooltip: allow rich content in the tooltip.
  • Practical Use Case: display long labels in table cells or cards without breaking layout.

Quick Start

Render a long text string as an ellipsis with optional line-clamp, tooltip preview, and expandable content.

Frequently Asked Questions about n-ellipsis

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I truncate long text with a tooltip preview in Naive UI?▼

To truncate text with a tooltip preview in Naive UI, use the n-ellipsis component family. It handles single-line text truncation and displays the full content in a default tooltip on hover.

What is the best way to implement multi-line line-clamp for overflowing text?▼

Multi-line line-clamp is implemented using configurable line count limits. The n-ellipsis component truncates text beyond the specified line count and provides an optional expand trigger to reveal hidden content.

Can I add a click trigger to expand truncated text in Naive UI components?▼

Yes, you can add a click trigger to expand truncated text. The n-ellipsis component supports an expand-trigger mechanism, allowing users to click or programmatically reveal the full hidden content.

Does n-ellipsis support custom rich content inside the hover tooltip?▼

Yes, n-ellipsis supports custom rich content inside the hover tooltip. You can configure the tooltip integration to display rich HTML content instead of just the plain truncated text string.

When should I use text truncation instead of wrapping text in table cells?▼

Use text truncation instead of wrapping when long labels or strings threaten to break your UI layout. Truncating text in table cells or cards maintains structural integrity while still providing full content via tooltips and expandable triggers.

Related Skills

Explore More Software Engineering Skills→
jiaiyanjiaiyan
21

el-text

Render styled inline text with type, size, truncation, and semantic tags in Vue templates.

Community
Intermediate
dvy1987dvy1987
3

secure-skill-content-sanitization

Detect and neutralize hidden content in markdown, HTML, SVG, and text files.

Community
Advanced
jiaiyanjiaiyan
8

naive-ui-design-layout

Design responsive Naive UI layouts using Grid, Flex, Space, and Layout components.

Community
Intermediate
gcomartinsgcomartins

responsive-web-design

Implement mobile-first responsive design with fluid typography and responsive breakpoints.

Community
Intermediate