Import
import { EllipsisModule } from '@backbase/ui-ang/ellipsis'
Usage
Use the bb-ellipsis-ui component to truncate overflowing text with an ellipsis. The text can be provided via the text input or as projected content.
<!-- Basic ellipsis usage with text input -->
<bb-ellipsis-ui
[text]="'This is a long text that will be truncated if it does not fit.'">
</bb-ellipsis-ui>
<!-- Ellipsis with projected content -->
<bb-ellipsis-ui>
This is a long text that will be truncated if it does not fit.
</bb-ellipsis-ui>
The EllipsisModule also exports the bbIsContentTruncated directive, which can be used to detect if the content of an element is visually truncated.
To use this directive, the hostRef input must implement the CheckContentTruncationBehaviour interface with a setIsContentTruncated(isTruncated: boolean) method.
<!-- Detect if content is truncated -->
<div bbIsContentTruncated [hostRef]="parentComponent">
Some potentially truncated content
</div>
Inputs
|
Input |
Format |
Default |
|---|---|---|
|
lineClamp |
number |
0 |
|
text |
string |
undefined |
|
tooltipTriggers |
string |
'click' |
lineClamp
The lineClamp input specifies after how many lines the text should be truncated. A value of 0 means single-line truncation.
<!-- Ellipsis with multi-line truncation after 2 lines -->
<bb-ellipsis-ui
[lineClamp]="2"
[text]="'This is a long text that will be truncated after two lines.'">
</bb-ellipsis-ui>
text
The text input sets the text to be truncated. If not provided, the component will use projected content.
<!-- Ellipsis with text input -->
<bb-ellipsis-ui [text]="'This is a long text.'"></bb-ellipsis-ui>
tooltipTriggers
The tooltipTriggers input specifies the events that should trigger the tooltip, as a space-separated string. Defaults to ’click'.
<!-- Ellipsis with tooltip shown on hover -->
<bb-ellipsis-ui [tooltipTriggers]="'mouseenter'"></bb-ellipsis-ui>
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.
- The component uses a tooltip to provide access to the full text when it is truncated.
- Keyboard and mouse events are supported for tooltip activation, depending on the tooltipTriggers input.