jquery limit lines in a paragraph and apply three periods to the end

Question

Hey everyone, I've been looking around for this solution but have only found solutions regarding limiting characters. I have the following code:

<div id = "ta_0" style="display: none;">
   <a href = "news.html">IRS announces 2011 COLA limits for qualified retirement plans</a>
   <br />Most retirement plan contribution and benefit limits for 2011 will
be unchanged from 2010, the IRS has announced. The 2011 cost of
living adjustments (COLAs), as applied by their Internal Revenue
C...</div>

I would like to limit the amount of characters after in the text after the anchor text to two lines. I know that I can limit the character limit but that might cut words in half. Instead I just want them to stop. I'd also like to append "..." at the end of the limit.

Any suggestions?

possible duplicate of [Cross browsers mult-lines text overflow with ellipsis appended within a width&height fixed div?](http://stackoverflow.com/questions/3404508/cross-browsers-mult-lines-text-overflow-with-ellipsis-appended-within-a-widthhe) — kapa, Dec 09 '11 at 07:32

score 2 · Answer 1 · answered Dec 15 '10 at 17:43

"Two lines" is next to impossible. It would require two things:

Thumbscrews CSS that controls every aspect of width and font size - and even with it you still cannot control rendering to 100%. This is the difficult part.
Knowledge of how wide text will render. A different amount of characters can fit into two lines. This is the impossible part.

What you can do is wrap the descriptive text in a block-level element (i.e. a <div>) and make it two lines high via CSS:

div.description {
  line-height: 1.2em;
  height: 1.4em;  /* max-height would be nicer but is not supported everywhere */
  overflow: hidden;
}

IE supports the convenient text-overflow: ellipsis; property, which gives you nice automatic ellipses … when the text overflows, the other browsers do not.

True I can do it in CSS, just didn't know if it was possible with jQuery. Thanks for your help Tomalak — JJ Nold, Dec 15 '10 at 17:46
@JJ Nold: http://stackoverflow.com/questions/536814/javascript-insert-ellipsis-into-html-tag-if-content-too-wide http://stackoverflow.com/questions/3404508/cross-browsers-mult-lines-text-overflow-with-ellipsis-appended-within-a-widthhei — Tomalak, Dec 15 '10 at 17:49

score 0 · Accepted Answer · edited May 23 '17 at 12:11

In order to do that, you would need to calculate the text width of each line, particularly if you are using a proportional width font.

I would suggest having a look at this question: Calculate text width with JavaScript

That questions deals with the question of how to perform text metric operations. I would use that in construction with adding one word at a time to a sentence, and when over the limit, starting a new line and stopping when enough lines were achieved.

jquery limit lines in a paragraph and apply three periods to the end

2 Answers2

Linked