CODEWITHSUNDEEP
javascripthtmlcss
V-Xtreme
V-Xtreme

Reputation: 7333

Show only first four lines of paragraph followed by ellipsis

I am using HTML paragraph. I only want to display at most four lines of the paragraph, but the text is too long. So instead of the entire text, I want to only display the first four lines that will fit, followed by an ellipsis.

In the CSS I tried to use word-wrap:break-word; but it only wraps the text after the four lines.

For example, I'd like to see this (number of lines will vary by browser, but imagine for argument's sake that there's only 4):

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac justo sodales, cursus turpis eget, lacinia risus. Aenean pretium eleifend mollis. Cras dictum ipsum eu dolor ultricies, at dictum diam auctor. In et nulla libero. Integer volutpat ornare justo ut fermentum. Ut non blandit leo, nec convallis diam. Nam congue neque vel turpis mattis scelerisque. Mauris rhoncus quam ac leo pellentesque...

When In fact the entire text would be much longer.

Upvotes: 1

Views: 2202

Answers (2)

Sajitha Rathnayake
Sajitha Rathnayake

Reputation: 1728

I don't know this can be done using css. But you can do it using javascript. Something like this

I assume that your paragraph id is 'para'.

<script>
var para=document.getElementById('para').innerHTML;
var p=para.substr(0,200)+"..."; // chane the 200 to your need
alert(p);

</script>

Upvotes: 1

Aaks20
Aaks20

Reputation: 401

On the same element use: 

text-overflow: ellipsis;

Upvotes: 3

Related Questions