{

Multiple ways to truncate a text content in Angular?


Sometimes, Long content string text needs to be truncated with limited characters and displayed in the Angular application.

There are multiple ways we can do

  • Angular slice pipe to truncate string content
  • Adding ellipse and truncating a string.

Angular truncate a string to limit characters

This example does limit the number of characters to display on UI.

Typescript component: Declared an variable content that holds long content:

import { Component, OnInit } from '@angular/core';
import { DecimalPipe } from '@angular/common';

@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  constructor() { }
  content: string = "long form of text display"
  ngOnInit(): void {
  }

}

Angular provides inbuilt slice pipe

It creates a subpart of an array of strings.

It takes start and end parameter.

{{expression|slice :start[:end]}}

expression is a variable or angular javascript expression. the start is an index starting position. the end is an end index starting position. for a string to truncate to 10 characters.

{{variable|slice: 0,10 }}

Here is an Angular html component.

<p>Angular truncate text example</p>
<div>
    {{content| slice:0:10}}
</div>

If you want to add an ellipse or some string after truncating the string content.

Here is an component example

<p>Angular trucate text & add some string example</p>
<div>
    {{ (content.length>10)? (content | slice:0:10)+'>>>':(content) }}
</div>

Angular CSS component to limit the long text and add ellipse end.

We can also do limit the long text using CSS in the Angular component

Here is an example

<div class="text">
This is long textThis is long textThis is long textThis is long textThis is long textThis is long
        textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis
        is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long
        textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis
        is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long
        textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis
        is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long
        textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis
        is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long
        textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis
        is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long
        textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis
        is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long
        textThis is long textThis is long textThis is long textThis is long textThis is long textThis is long textThis
        is long textThis is long textThis is long text.</span>
</div>

Here is an CSS code

.text {
    display: -webkit-box;
    max-width: 300px;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.