Does anyone know of a clean and easy way to truncate a section of text to two lines. This is what I am trying to truncate (p element):

<blockquote><p>&#8220;<?=$test_entry ?>&#8221;</p></blockquote><cite><?=$test_name ?></cite>

I have tried various solutions including clamp.js (which doesnt even work properly in the example supplied) I have tried CSS3 solutions using text-overflow but these only truncate to one line. All other javascript examples use string length which breaks if the text size changes, if special chars are encoded and under many other conditions.

I am happy to change the markup if necessary I just want to be able to truncate text to fit two lines within a div box and have it end with an elipses (...) or even better with (..."). I thought this would be straightforward but apparantly not.

Can anyone point me to an existing solution or give me a clue where to start with this. Any help much appreciated.

Does anyone know of a clean and easy way to truncate a section of text to two lines. This is what I am trying to truncate (p element):

<blockquote><p>&#8220;<?=$test_entry ?>&#8221;</p></blockquote><cite><?=$test_name ?></cite>

I have tried various solutions including clamp.js (which doesnt even work properly in the example supplied) I have tried CSS3 solutions using text-overflow but these only truncate to one line. All other javascript examples use string length which breaks if the text size changes, if special chars are encoded and under many other conditions.

I am happy to change the markup if necessary I just want to be able to truncate text to fit two lines within a div box and have it end with an elipses (...) or even better with (..."). I thought this would be straightforward but apparantly not.

Can anyone point me to an existing solution or give me a clue where to start with this. Any help much appreciated.

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Feb 11, 2012 at 19:40 SwiftDSwiftD 6,08966 gold badges4646 silver badges7171 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Here you can find an existing solution based on jQuery, which should be working cross browser, in this SO question.

This is a very simple solution to truncate the multiline paragraph and this will also add the ellipsis dots at the end of the last line.

p.truncate_text {
    color:red;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis justo nibh. Phasellus ac ante enim. Mauris ullamcorper mauris nec laoreet lacinia. Sed interdum tincidunt tempor. Cras euismod, tellus id consequat varius, est lectus sagittis justo, sit amet egestas sem dolor sit amet arcu. In modo nibh ac nisi tincidunt tincidunt. Nullam suscipit, mi nec posuere imperdiet, odio est pellentesque arcu, at varius massa ex nec urna.</p>

<p class="truncate_text">This paragraph will truncate into 3 lines Quisque ut purus nunc. Aenean vitae lectus maximus, fermentum justo quis, lobortis neque. Curabitur lacinia in massa in efficitur. Praesent et dolor et ex sodales volutpat vel lobortis ligula. Maecenas convallis luctus tempus. Vivamus non libero nisi. Donec facilisis, odio sed dictum consectetur, eros dolor pellentesque quam, ut ornare est ligula eu ligula. Etiam elementum nibh lectus, quis sodales massa malesuada vitae. Etiam finibus quam eget condimentum rutrum. Donec et velit ipsum. </p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis justo nibh. Phasellus ac ante enim. Mauris ullamcorper mauris nec laoreet lacinia. Sed interdum tincidunt tempor. Cras euismod, tellus id consequat varius, est lectus sagittis justo, sit amet egestas sem dolor sit amet arcu. In modo nibh ac nisi tincidunt tincidunt. Nullam suscipit, mi nec posuere imperdiet, odio est pellentesque arcu, at varius massa ex nec urna.</p>

Use the textarea element to limit text rows!

<textarea rows="2" readonly disabled>Try enameling the ricotta broccolis with aged champaign and rum, warmed. </textarea>

You could then use a pseudo element :after to add an ellipsis or a 'Read more'.

Don't forget the attributes 'readonly' and 'disabled'. Readonly prevents textarea from being interacted with by the user. Disabled prevents any forms in the page from submitting the values.