DEV Community

Cover image for Angular Directive that Elegantly Continues Truncated Text
Rafael Hovhannisyan
Rafael Hovhannisyan

Posted on

Angular Directive that Elegantly Continues Truncated Text

#angular #overflow #ellipsis #tooltip

We've all been there. You're building a sleek data table, everything looks perfect, and then... the client's data arrives. Suddenly, "John" becomes "Dr. Jonathan Christopher Montgomery III" and your beautiful layout explodes. So you slap on some CSS truncation:

.table-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
Enter fullscreen mode Exit fullscreen mode

Problem solved? Not really. Now users can't read the full content. Time to add tooltips? Another 50KB library? Custom overlay logic? Ugh.

Enter ngx-overflow-reveal

I built ngx-overflow-reveal because I was tired of reinventing this wheel in every project. But here's the twist - unlike traditional tooltips that duplicate the entire text in a popup, this directive creates a seamless continuation from where your text was cut off. No re-reading. No visual jumps. Just a natural flow that reveals only the hidden part.

Oh, and it's zero dependencies. Just Angular.

import { NgxOverflowRevealDirective } from 'ngx-overflow-reveal';

@Component({
  selector: 'app-table',
  imports: [NgxOverflowRevealDirective],
  template: `
    <td 
      ngxOverflowReveal
      style="max-width: 150px; overflow: hidden; text-overflow: ellipsis;">
      {{ userBio }}
    </td>
  `
})
Enter fullscreen mode Exit fullscreen mode

That's it. The directive handles everything else.

What Makes It Smart?

Here's what sets this apart from every tooltip library out there: instead of showing the entire text in a separate overlay (forcing users to re-read from the beginning), ngx-overflow-reveal creates a seamless continuation from where the text was cut off.

Think about it:

  • Traditional tooltip: "Dr. Jonathan Christopher..." → [hover] → "Dr. Jonathan Christopher Montgomery III" (start over reading)
  • ngx-overflow-reveal: "Dr. Jonathan Christopher..." → [hover] → continues naturally → "...Montgomery III"

The revealed portion appears to extend from the truncated text, maintaining your reading flow. It's like the text simply slides out from hiding, because that's exactly what it does.

Customization Options

The directive comes with several handy properties to fine-tune the behavior:

<div 
  ngxOverflowReveal
  [ngxOverflowRevealElevated]="true"        // Add subtle shadow (default: false)
  [ngxOverflowRevealDelay]="500"            // Hover delay in ms (default: 120)
  [ngxOverflowRevealAnimated]="false"       // Disable fade-in (default: true)
  [ngxOverflowRevealMaxWidth]="400"         // Constrain panel width (default: undefined)
  [ngxOverflowRevealViewportPadding]="24"   // Edge padding (default: 24)
  [ngxOverflowRevealPanelClass]="'custom'"  // Add custom CSS class
  style="width: 200px; overflow: hidden; text-overflow: ellipsis;">
  Configure everything or nothing—your choice
</div>
Enter fullscreen mode Exit fullscreen mode

The best part? Most of the time you won’t need any of these options, the defaults just work.​​​​​​​​​​​​​​​​

Try It Now

Don't take my word for it. Open the StackBlitz demo and see it in action. Or better yet, install it in that project where you're currently fighting with truncated text.

GitHub: github.com/hosembafer/ngx-overflow-reveal

Like it? Star it on GitHub. Found a bug? Open an issue. Have an idea? PRs are welcome.

Built with ❤️ by Rafayel Hovhannisyan because sometimes the simplest problems deserve elegant solutions.

Top comments (0)