Truncate Text - National Design System

A single-class CSS utility that clips overflowing text with an ellipsis, supporting both single-line and configurable multi-line truncation on any element

Single-Line Truncation

Add nds-truncate to any text element to clip it to one line with an ellipsis. The element respects its parent's width.

Default Truncation

National Digital Transformation Strategy Overview and Implementation Roadmap

Complete documentation and guidelines for all ministry digital services including API references, implementation guides, best practices for developers, and integration specifications for government applications.

Multi-Line Truncation

Set --truncate to control how many lines are visible before the ellipsis. Useful for card descriptions and content previews where more than one line adds context.

Citizen Services Portal

The unified portal provides access to over 200 government services across 35 ministries. Citizens can submit applications, track requests, schedule appointments, and receive notifications about their active transactions. The platform supports biometric authentication, digital signatures, and secure document uploads for a seamless end-to-end experience.

Built-in Features

CSS-Only

Works with a single class and zero JavaScript. No initialization, no event listeners, no cleanup.

Configurable Line Count

Set --truncate to any number to control how many lines remain visible before the ellipsis.

Any Text Element

Apply to headings, paragraphs, spans, divs, or any element that contains text content.

Width-Responsive

Truncation recalculates automatically when the parent container resizes, with no additional code required.

Usage Guidelines

Best Practices

  • Use nds-truncate for text that may overflow in constrained layouts such as Cards, table cells, navigation labels, and list items
  • Use multi-line truncation (--truncate: 2 or --truncate: 3) for descriptions and summaries where a single line removes too much context
  • Pair with a title attribute or a tooltip so users can access the full text on hover
  • Do not truncate text that the user must read in full to complete a task, such as form labels, error messages, or legal disclaimers. Show the full text or use Expandable Content instead
  • Do not use truncation as a substitute for writing concise content. If every card description is being clipped, the content itself is too long
  • Choose the line count based on the content type: 1 line for titles and labels, 2 lines for short descriptions, 3 lines for content previews where the opening sentence matters
  • When truncating inside flex or grid children, ensure the element has a constrained width (from the parent or an explicit max-width). Without a width boundary, the text will not overflow and truncation will not activate
  • Test truncated content with screen readers to verify the full text is still announced. The nds-truncate class only clips visually; the DOM text remains intact
  • Prefer Expandable Content over truncation when users need on-page access to the full text. Truncation hides content permanently unless the user navigates elsewhere; expandable content reveals it in place

CSS Custom Properties

PropertyDefaultDescription
--truncate1Number of visible lines before the text is clipped with an ellipsis. Set to any positive integer.
Was this page useful?
60% of users said Yes from 2843 Feedbacks