Show first line of a paragraph

Question

I have a DIV with a multi-line paragraph.

Is there any way (maybe using jQuery) to only show the first line of the paragraph and hide the others?

Answer 1

There is not an outright way to do this by specifying the first line. I would suggest changing the height of the DIV using CSS to only show the first line. It would seem to me to be the simplest solution. If you then want to change to show the whole line with javascript just use it to change the height of the DIV back to 100%.

EDIT: I stand corrected, I was not aware that there was a first-line pseudo class. However changing the height may still be the simplest way.

Answer 2

Here is a way (sort of) by making the paragraph white-on-white except the :first-line of it: http://jsbin.com/usora4/2/edit

Snippet of CSS:

p { color: white; }
p:first-line { color: black; }

Answer 3

Determine the height of your line and set the height of the div such that only one line is shown, and set the div's overflow attribute to hidden.

Answer 4

I haven't tried it, but yuou should be able to do a little better using visibility, eg

<div class="excerpt">
   This is my text.  It has many lines. This is my text.  
   It has many lines.This is my text.  It has many lines. 
   This is my text.  It has many lines. This is my text.  
   It has many lines.
</div>

and then setting up a style

div.excerpt { visibility: hidden; }
div.excert:first-line { visibility: visible; {