displaying ellipsis after three lines in angular 5

Question

I was displaying the reply message in my web app as shown below with CSS styling as below the picture.

this is the CSS styling of above

 .replyMessage {
      width: 100%;
       padding-left: 0px;
       max-width: 500px;
       min-width: 100px;
       word-break: break-all;
       max-height: 85px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
 }

but I need to display the ellipsis after three lines as shown below

Any help really appreciated.

version: Angular 5

this below stying helped me to solve issue in chrome

.replyMessage {
     width: 100%;
     padding-left: 0px;
     max-width: 500px;
     min-width: 100px;
     word-break: break-word;
     max-height: 85px;
     overflow: hidden;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     text-overflow: ellipsis;
     line-height: 21px;
     display: -webkit-box;
 }

but this is not working fine in firefox

Possible duplicate of [Limit text length to n lines using CSS](https://stackoverflow.com/questions/3922739/limit-text-length-to-n-lines-using-css) — Lotus91, Jun 07 '18 at 13:33
It's funny. 4+ years ago a co-worker and I (at the demand of product management) spent the better part of a week on this problem. We ended up writing a custom Javascript solution that tokenized the text (so as not to break mid-word) and inserted the ellipsis character. Nice to see how much things have improved since then. :-P — DavidW, Jun 07 '18 at 14:07
Maybe this helps: https://stackoverflow.com/a/53753528/5155810 — Martin Cremer, Dec 13 '18 at 01:00

score 1 · Answer 1 · answered Jul 20 '19 at 16:56

1

I know this question is old but still no answer and this is the first result I got on Google...

I got this working using this awesome library https://github.com/lentschi/ngx-ellipsis

answered Jul 20 '19 at 16:56

Wrong

1,195
2
14
38

score 0 · Answer 2 · answered Oct 26 '18 at 14:12

0

try this:

/* autoprefixer: off */
 -webkit-box-orient: vertical;
/* autoprefixer: on */

it works for me

answered Oct 26 '18 at 14:12

Alessio Campanelli

970
11
19

Adnan Ahmed · Answer 3 · 2019-09-13T14:13:04.527

Use this library. Issue with this library is that you will have to give width to parent element in pixels. e.g.

<!-- the outer container MUST have a width! -->
<div style="width:250px;">
    <!-- we want two lines max. -->
    <div [clamp]="2">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
</div>

Library suggested by @Wrong is looking better. It handle responsiveness and takes height. here

displaying ellipsis after three lines in angular 5

3 Answers3