2

I am looking for a way to truncate a <p> tag to a given number of lines (with a trailing ...).

Using a number of characters doesn't work since the width of the element depends on device screen width.

AP.
  • 8,082
  • 2
  • 24
  • 33
younes younes
  • 21
  • 3
  • Could you please include some code here as to how your `

    ` tag looks like, what did you try?

     – AP. Mar 22 '17 at 16:07
  • This isn't really an Angular 2 question. Take a look css [`text-overflow`](https://developer.mozilla.org/en/docs/Web/CSS/text-overflow) – Christopher Moore Mar 22 '17 at 16:10
  • @ChristopherMoore text-overflow works for one line. for n lines It seems like an Angular 2 pipe is necessary – younes younes Mar 23 '17 at 08:02
  • Possible duplicate of [Applying an ellipsis to multiline text](http://stackoverflow.com/questions/33058004/applying-an-ellipsis-to-multiline-text) – Christopher Moore Mar 23 '17 at 10:52
  • @younesyounes you're right - I didn't realise `text-overflow` doesn't work for multi-line text. A duplicate SO question linked in the comment above should help you get the desired effect – Christopher Moore Mar 23 '17 at 10:53

1 Answers1

-4

You don't need angular. Just CSS. Set a height and a text-overflow property.

something like this: 

p{
  height: 200px;
  text-overflow: ellipsis;
}

You'll have to figure out the number of pixels that corresponds with the number of lines you want. For example, if you want 10 lines to show, and each line has a height of 20px, the height will need to be 200px.

borbesaur
  • 681
  • 4
  • 10