CODEWITHSUNDEEP
cssangulartypescript
Fahad Subzwari
Fahad Subzwari

Reputation: 2325

how can i show text ellipsis dynamically using css and angular7?

i have a list of cards to be displayed in a component. On each card there is a description is coming from server and there is a ngFor in my component.html 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>

in {{row.offer_desc}} i am getting description of various lengths. In some cards i am getting 2 lines of description in some i am getting 4 lines of description like this

enter image description here

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;
}

So i want to add text ellipses ... at the end. I am hiding overflow text but i also want to add ... in the end of the text which is showing in the card. As i have dynamic length of lines so i didn't succeeded to achieve this using css and angular7

How can i do this?

Upvotes: 0

Views: 1682

Answers (2)

Prabh
Prabh

Reputation: 1059

You can use angular pipe to achieve the desired result.

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

@Pipe({
  name: 'ellipsis'
})
export class EllipsisPipe implements PipeTransform {
  public transform(value: string): string {
    // pick whatever number fits your need
    if (value.length > 40) {
      return value.substring(0, 40).concat('...');
    }
    return value;
  }
}

HTML:

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

Upvotes: 1

Fahad Subzwari
Fahad Subzwari

Reputation: 2325

I managed to find a solution myself. Solution is ngx-ellipsis to put text ellipsis dynamically like this

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

Upvotes: 0

Related Questions