Angular Ellipsis

Overview

The Angular Ellipsis Directive is a powerful tool designed to enhance the display of multi-line text by gracefully truncating it to fit a designated area, all while seamlessly adding an ellipsis at the end. Perfect for applications where you want to manage text overflow in a user-friendly manner, this directive automatically recalculates the visibility of text on window resizes, ensuring that the presentation remains optimal across different screen sizes.

With easy integration into your Angular projects, the directive promises to elevate the user experience by allowing customizable ellipsis symbols and append text. It’s especially useful for applications where space is at a premium and readability is key, while also providing a clean way to invite interaction with expanded content.

Features

• Multi-Line Truncation: The directive truncates multi-line text without any HTML, making it perfect for plain text formatting.
• Dynamic Resizing: Automatically recalculates truncation and appends ellipsis on window resize to maintain visibility.
• Overflow Handling: Text is truncated only if it exceeds the allowed container height, otherwise, it displays fully.
• Live Customization: The custom ellipsis text can update in real-time when bound to a scope variable.
• Append Options: Include custom strings after the ellipsis using the data-ellipsis-append attribute for enhanced functionality.
• Interactive Elements: Assign a click function to the appended text, allowing for seamless user interaction with dynamic content.
• Custom String Separator: Enhance text formatting by using a specified string separator to split text, beyond just spaces.
• Fallback Font Size: Set a fallback font size that attempts to resize text if overflow is detected before applying ellipsis.

This directive is a must-have for developers looking to manage text overflow smoothly while providing users with tools to access more content.