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

No need for JavaScript, measuring height, or changing visibility. Just set the paragraph to display inline and not to wrap its text. You'll want to set the overflow on the parent div to "hidden" so the remaining lines in the paragraph don't spill out.

#wrap {
    overflow: hidden;   
    text-overflow: ellipsis; 
}
p {
    display: inline;
    white-space: nowrap;
}​

http://jsfiddle.net/VvdBs/

Answer 3

It has been awhile since this was answered but seeing there is no example here is one that works pretty well:

<div style="width:200px">
<div>
    This is above the paragraph.
</div>
<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>
<div>
    This is below the paragraph.
</div>
</div>


<style type="text/css">
div.excerpt { height:2.2em; overflow:hidden; }
div.excerpt:hover { height:auto; }
</style>

http://jsfiddle.net/h82313am/

Answer 4

Just adding this here as an idea. It allows you to show and hide the text with a text box. CSS only.

p.bar { font-size:0; margin:0;padding:10px;background: #ddd; -webkit-transition: font-size .25s;transition: font-size .25s;
}
p.bar:first-line { font-size:20px; }
input:checked + label  + p.bar {font-size: 20px;}

<input id="foo" type="checkbox"><label for="foo">show</label><p class="bar">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

Answer 5

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 6

I haven't tried it, but you should be able to do a little better using visibility, e.g.

<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.excerpt:first-line { visibility: visible; }