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

Creating a redux store with an object using typescript: A step-by-step guide

What causes the HTML to not evaluate the values when the pipe is used?

Ways to incorporate horizontal scrolling into a flex container within a Bootstrap navigation bar

The appearance and functionality of the app undergo a noticeable transformation after being bundled with Webpack

Issue detected with XMLHttpRequest - "The requested resource does not have the 'Access-Control-Allow-Origin' header."

What is the best way to position a div in relation to a table header (th) but not inside it?

Switch between dropdowns with jQuery

typescript makeStyles() functions from material-ui library

What could be the reason for the webpack:// not showing up in Chrome after running ng build?

What is the best way to assign a unique ID to every element in this situation?

What's the best way to assign a dual-value condition within a form group field?

The provided Material-UI Fade component contains multiple children, which is not supported by 'ReactElement<any, any> | undefined'

Using a function from one class within another class by passing it as a prop

Inquiry regarding Typescript's array of types

I am encountering an issue while developing a JavaScript filtering system

Does Blazorise support the Material .figure-is-16x16 class?

Adjusting the size of HighCharts HighMaps with a custom function

Issues with JavaScript causing slideshow to malfunction

Dealing with Cross-Origin Resource Sharing (CORS) issue in an Angular 6 and .Net Core

Customize the background image in your Windows 8 app developed with HTML