Multiline Text Truncating

Question

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.

score 2 · Accepted Answer · edited May 23 '17 at 12:03

2

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

edited May 23 '17 at 12:03

Community

1
1

answered Feb 11 '12 at 21:10

m2k

71
4

Thank you for your help, worked like a charm. Probably should search stack overflow more thouroughly before posting questions - I had tried so many things that didn't work at that point. Thanks Again – SwiftD Feb 12 '12 at 13:31
The solution I tried from this answer worked well on desktop browsers but caused javascript timeout on the iphone. See link for comment under solution – SwiftD Mar 07 '12 at 14:15

score 1 · Answer 2 · answered Jul 23 '20 at 05:22

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 commodo 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 commodo nibh ac nisi tincidunt tincidunt. Nullam suscipit, mi nec posuere imperdiet, odio est pellentesque arcu, at varius massa ex nec urna.</p>

Elise Chant · Answer 3 · 2014-01-17T20:48:52.983

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.

Multiline Text Truncating

3 Answers3