Text Overflow

// Basic truncation
WText(
  'Long text that should be truncated...',
  className: 'truncate',
)

// Limit to specific lines
WText(
  'Multi-line text block...',
  className: 'line-clamp-3',
)

Basic Usage#

Use truncate to prevent text from wrapping and truncate overflowing text with an ellipsis (...) if needed. This is the most common way to handle overflow for single-line text.

WDiv(
  className: 'w-64',
  child: WText(
    'The quick brown fox jumps over the lazy dog.',
    className: 'truncate',
  ),
)

Quick Reference#

Truncate#

The truncate utility is a shorthand that sets three properties at once:

1. Sets maxLines to 1
2. Disables softWrap
3. Sets overflow to TextOverflow.ellipsis

WText(
  'Long text that will be cut off with an ellipsis if it gets too long',
  className: 'truncate',
)

Ellipsis & Clip#

Use text-ellipsis or text-clip to control the visual overflow behavior specifically.

• text-ellipsis: Renders an ellipsis (...) when text overflows.
• text-clip: Simply cuts off the text at the boundary.

// Ellipsis (default for truncate/line-clamp)
WText('...', className: 'text-ellipsis')

// Clip (hard cut)
WText('...', className: 'text-clip')

Line Clamp#

Use line-clamp-{n} to limit text to a specific number of lines. This automatically sets the overflow style to ellipsis.

Supported values are any integer number (e.g., line-clamp-2, line-clamp-5) and line-clamp-none.

WText(
  'This is a long paragraph that needs to be clamped to a specific number of lines...',
  className: 'line-clamp-3',
)

// Resetting line clamp
WText(
  '...',
  className: 'line-clamp-3 lg:line-clamp-none',
)

Responsive Design#

Apply different overflow utilities at different breakpoints using standard responsive prefixes.

// Truncate on mobile, allow wrapping on desktop
WText(
  'Responsive text behavior...',
  className: 'truncate md:whitespace-normal',
)

// 2 lines on mobile, 4 lines on tablet, unlimited on desktop
WText(
  'Responsive line clamping...',
  className: 'line-clamp-2 md:line-clamp-4 lg:line-clamp-none',
)

Dark Mode#

While overflow utilities don't visually change in dark mode, you can still apply them conditionally using the dark: prefix if your design requires different text handling in dark mode.

WText(
  '...',
  className: 'truncate dark:line-clamp-2',
)

Arbitrary Values#

Customizing Theme#

These utilities do not use theme variables. line-clamp accepts numeric values directly, and overflow types are static.

Related Documentation#

• Font Size