[HTML] Help How to make text overflow = ellipsis work with multiple lines of text?

[Anthony10]

Hello, I am working on a website and am trying to make overflowing text turn into an ellipsis. It seems I can only do this when the text takes up one line.

 

How do I make it so I can have multiple lines of text, and then it turns into an ellipsis?

 

 

For example, I am trying to do this:

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor porttitor eros, efficitur dignissim elit auctor dictum. Nunc pretium semper tellus in convallis. Morbi quis rutrum diam, ac tincidunt velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor porttitor eros, efficitur dignissim elit auctor dictum. Nunc pretium semper tellus in convallis. Morbi quis rutrum diam, ac tincidunt velit...

 

But I keep getting this:

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor porttitor eros, efficitur dignissim elit auctor dictum...

 

Or the text will just keep going and then cuts off and looks ugly.

 

Here is a codepen of with what I am talking about: http://codepen.io/anthonyn10/pen/WbVEPB

[colonel_mortis]

There's no easy way to do it using pure HTML and CSS (for some reason - it would be really useful for a lot of people), but there are some more complicated workarounds that people have managed to come up with. This way seems to be one of the better ones: http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/

Alternatively, there are a whole load of different methods outlined in https://css-tricks.com/line-clampin/(make sure you look at the links at the bottom as well for more recent versions), some of them using pure css and others using javascript as well. The method linked above is also linked from that page.

[Anthony10]

There's no easy way to do it using pure HTML and CSS (for some reason - it would be really useful for a lot of people), but there are some more complicated workarounds that people have managed to come up with. This way seems to be one of the better ones: http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/

Alternatively, there are a whole load of different methods outlined in https://css-tricks.com/line-clampin/(make sure you look at the links at the bottom as well for more recent versions), some of them using pure css and others using javascript as well. The method linked above is also linked from that page.

Thanks!