Ellipsis
IMPORT MODULE

When the text is too long, the Ellipsis automatically shortens it according to its length or the maximum number of lines.

Examples

There were injuries alleged in three cases in 2015, and a fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.
There were injuries alleged in three cases in 2015, and a fourth incident in September, according to...

Show Tooltip

There were injuries alleged in three cases in 2015, and a fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.
There were injuries alleged in three cases in 2015, and a fourth incident in September, according to...
Truncate according to the number of character

length attribute specifies the maximum length where the text will automatically be truncated when exceeded.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'components-ellipsis-number',
  template: `
    <ellipsis length="100">{{ article }}</ellipsis>
    <h4 class="mt-lg">Show Tooltip</h4>
    <ellipsis length="100" tooltip>{{ article }}</ellipsis>
  `,
})
export class ComponentsEllipsisNumberComponent {
  article =
    'There were injuries alleged in three cases in 2015, and a fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.';
}

There were injuries alleged in three cases in 2015, and a fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.

There were injuries alleged in three cases in 2015, and a fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.

...
Truncate according to the number of rows

lines attribute specifies the maximum number of rows where the text will automatically be truncated when exceeded. In this mode, all ng-content will be converted to plain text.

Also note that, in this mode, the outer container needs to have a specified width (or set its own width).

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'components-ellipsis-line',
  template: `
    <ellipsis lines="3" tooltip style="width: 200px">
      <p>
        There were injuries alleged in three <a href="#cover">cases in 2015</a>, and a fourth incident in September, according to the safety
        recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.
      </p>
    </ellipsis>
  `,
})
export class ComponentsEllipsisLineComponent {}

API

ellipsis

PropertyDescriptionTypeDefault
[tooltip]tooltip for showing the full text content when hovering overbooleanfalse
[length]maximum number of characters in the text before being truncatednumber-
[lines]maximum number of rows in the text before being truncatednumber-
[fullWidthRecognition]whether consider full-width character length as 2 when calculate string lengthbooleanfalse
[tail]specify overflow tailstring'...'