What is the best way to dynamically implement text ellipsis using CSS in conjunction with Angular 7?

Question

What is the best way to dynamically implement text ellipsis using CSS in conjunction with Angular 7?

i need to display a list of cards in a component, each card has a description coming from the server. In my component.html, I am using a ngFor like this:

<div [style.background-image]="'url('+row.companyId?.coverUrl+')'" class="img-area">
</div>
<div class="card-content-area">
    <p class="card-title cursor-pointer" (click)="navigateToCOmpany(row)">{{row.companyId.name}}</p>
    <div class="card-description-area">
        <p class="site-text">{{row.offer_desc}}</p>
    </div>
    <a (click)="referralClick(row, i)" class="site-btn show-desktop-block">Get referral link</a>
    <a (click)="referralClick(row, i)" class="site-link-mobile show-mobile-block"><i class="fa fa-link mobile-link" aria-hidden="true"></i> Get Referral link</a>
</div>

The {{row.offer_desc}} field contains descriptions of varying lengths. Some have 2 lines while others have 4 lines.

https://i.stack.imgur.com/dGHDb.png

Here is my CSS:

.card-description-area {
    min-height: 102px !important;
    max-height: 102px;
    overflow: hidden;
    margin-bottom: 10px;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
}

.site-text {
    font-size: 16px !important;
    font-family: 'Muli', sans-serif !important;
    line-height: 24px !important;
}

I want to add text ellipses (...) at the end of the truncated text. Though I'm hiding the overflow text, I also want to indicate that more text exists by adding ellipses at the end. However, due to dynamic length of lines, I haven't been able to achieve this using only CSS and Angular 7.

Any suggestions on how I can accomplish this?

css angular typescript

Answer 1

Answer №1

To achieve the desired outcome, you have the option of using an angular pipe.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'ellipsis'
})
export class EllipsisPipe implements PipeTransform {
  public transform(value: string): string {
    // Adjust the number according to your preference
    if (value.length > 40) {
      return value.substring(0, 40).concat('...');
    }
    return value;
  }
}

HTML:

<p class="site-text">{{ row.offer_desc | ellipsis}}</p>

Answer 2

To achieve the desired outcome, you have the option of using an angular pipe.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'ellipsis'
})
export class EllipsisPipe implements PipeTransform {
  public transform(value: string): string {
    // Adjust the number according to your preference
    if (value.length > 40) {
      return value.substring(0, 40).concat('...');
    }
    return value;
  }
}

HTML:

<p class="site-text">{{ row.offer_desc | ellipsis}}</p>

Answer 3

Answer №2

I successfully discovered a solution on my own. I used the ngx-ellipsis library to dynamically add text ellipsis like this

<p class="site-text" ellipsis ellipsis-content="{{row.offer_desc}}"></p>

Answer 4

I successfully discovered a solution on my own. I used the ngx-ellipsis library to dynamically add text ellipsis like this

<p class="site-text" ellipsis ellipsis-content="{{row.offer_desc}}"></p>

What is the best way to dynamically implement text ellipsis using CSS in conjunction with Angular 7?

Answer №1

Answer №2

Similar questions

Utilizing an object property for @Input binding in Angular: A step-by-step guide

The best practices for coding Jquery plugins to adhere to style guidelines

Error in Angular6: Why can't handleError read injected services?

There seems to be an issue with the functionality of the Bootstrap Modal

Using TypeScript to apply a typed decorator function to a subclass

Tips for positioning three child divs horizontally within a parent div with flexible dimensions and arranging each one separately

Having trouble with the image source in Angular?

Guide on creating and deploying an iOS API file onto a physical device with a Mac computer

Asynchronous jQuery operations using promises and finally functionality

Ways to create gaps among the links in the Bootstrap 4 navigation bar?

What methods can be used to accurately display the data type with TypeOf()?

Steps to automatically make jest mocked functions throw an error:

Unsuccessful invocation of React's componentDidMount method

Cannot see the box-shadow with :before and z-index in CSS

Displaying Information in Angular Modal Windows

Angular 6's Select feature is failing to properly update user information

Delete the padding of a component with the power of angular

When working with TextareaAutosize component in MUI, an issue surfaces where you need to click on the textarea again after entering each character

The issue arises when TypeScript declarations contain conflicting variables across multiple dependencies

What could be the reason for the excess white space at the top and bottom of the page?