How to trim text of unknown length by a certain number of lines?

Question

Considering this:

<p class="summary">Here is some text, could be 5 words, could be 500 words.</p> 

I grab the paragraph height with this code:

 var pHeight = $('.summary').height(); 

And in my case, if it is more than 32, it lasts three lines (which is too long). In this case, I want to trim the text and paste the link "More ...". The problem is, how do I figure out where to crop so that the text only includes two lines? If I could somehow take a char counter and multiply it by some number, which is the size of each letter. With a monospace that would be relatively simple, I think, but this is the Arial we are talking about.

Any points in the right direction will be appreciated, thanks!

Answer 1

There is no good way to do this for several reasons. Firstly, different browsers / platforms can display fonts in different ways (no matter how distinguishable they are). Secondly, there is no way from javascript to extract the individual font size of a given font (AFAIK).

If I implemented something like this, I would just have a constant for the longest allowable length and substring . I would also do this server side, as it makes no sense to send data to a client that you are not going to use.

Another method (though not the one I would use) would be to put your text in a div with a given width and height, cutting off any overflow with overflow: hidden . Of course, this could potentially leave you partially cut off words, so I would advise you to do so.

Answer 2

If your height is too high, you can simply put a “p” with a white background above the third line and add “Read More ...” to it. And add height and "overflow: hidden" to your "p".

Answer 3

I would use a jquery text expander. There are a few examples, but here is an example: http://plugins.learningjquery.com/expander/ The cutoff point is based on the number of characters, but with some trial version and error you should be able to find a character counter that gives you two lines.

Answer 4

I worked on some of these issues for a while, and I clarified something. This is expensive code, but it worked well for me. There is a similar problem that I solve in my blog , if you know Spanish and need some coding ideas, I will guide you right now.

You know the size of a container if it has two lines based on a string of High text. So imagine your container is high Ypx.

• Get all text from container
• Set the container for overflow: automatically and set max-height: Ypx;
• Start adding word by word the text that you grabbed from the container.
• Check to see if Height is less or less is Ypx
• Continue adding words until (4) becomes invalid and then delete the last word added.

As I said, it’s not very cheap, but I did a few tests, and the time it took to do it was linear, so in a few words it will be pretty fast (when you check more than 10,000 times, a little less than a second)

Hope this helps!

Answer 5

I wrote a small jQuery plugin that removes words from content until an element is below a certain height. (And he adds three dots at the end of the content.) This solution is similar to the Lomefin solution. Unlike its solution, mine is optimized for situations where you need to delete only a few words.

The code is here .

Answer 6

I would say that I use several different typical text fragments and see how many characters it takes to get to two lines. Average result and round so that you never move by accident. Then, with your real text, you round to this expected number, and your text should fill in about 2 lines.