search

lentschi / ngx-ellipsis

Multiline text with ellipsis for angular 9+
MIT License
96 stars 22 forks source link

..See More doesn't always end up at the end of the second line based on text change in dynamic content #13

Closed ck4957 closed 5 years ago

ck4957 commented 5 years ago 
<dt>Summary: </dt>
  <dd *ngIf="!footerExpanded" class="mb-2" style="width:100%; line-height: 20px; max-height: 40px;" ellipsis-word-boundaries=" "  ellipsis="<br>See More" (ellipsis-click-more)="toggleFooter()" [ellipsis-content]="mySummaryText"></dd>
  <dd #summaryTextExpanded *ngIf="footerExpanded">{{mySummaryText}}
   <br>
  <span><a href="javascript:;" (click)="toggleFooter()">See Less</a></span>
 </dd>

I have fixed footer on the page where I display content based on form values selected. If the content grows more than two lines, I am trying to add see more link and on click I increase the footer height and show entire content and clicking see less shrinks the footer again.

However, the issue is see more doesnt always appear at the end of the second line. So I added
so that I always appear on the third line, however in the latter approach the content is hidden in between the second line. I am aiming for a consistent behaviour. I tried line height but doesnt seem to help much.

Any suggestions?

lentschi commented 5 years ago

@ck4957 Just set ellipsis="See More" (without the <br>). Then add styles to make it appear in the next line - e.g.:

.ngx-ellipsis-more {
  display: block;
}

(ngx-ellipsis-more is hardcoded in ngx-ellipsis. You'll need to add something like encapsulation: ViewEncapsulation.None to your component to make it work.)