CODEWITHSUNDEEP
jquerycss
CaptSaltyJack
CaptSaltyJack

Reputation: 16025

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

Given this:

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

I'm grabbing the paragraph height with this code:

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

And in my case, if it's greater than 32, it's three lines long (which is too long). In that case, I want to trim the text and insert a "Read More..." link. The problem is, how do I figure out where to trim in order to make the text only take up two lines? If only there were some way I could take the char count and multiply it by some number that is the size of each letter. With monospace that would be relatively simple I think, but this is Arial we're talking about.

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

Upvotes: 6

Views: 4146

Answers (6)

Philipp Zedler
Philipp Zedler

Reputation: 1670

I've written a little jQuery plugin that removes words from the content until the element is lower than a certain height. (And it adds three dots at the end of the content.) This solution is similar to the one by Lomefin. In contrast to his solution, my one is optimized for situations where you need to remove only a few words.

The code is here.

Upvotes: 1

Lomefin
Lomefin

Reputation: 1252

I've been working with some of this problems for a while and I have cleared some ideas in the meanwhile. It's kind of expensive in code, but it has worked nice for me. There is a similar problem I solve in my blog if you know spanish and need some coding ideas, right now I will just guide you.

You kind of know the size of the container if its meant to have 2 lines, based on the lineHeight of the text. So imagine your container is Ypx high.

  1. Get all the text from the container
  2. Set the container to overflow:auto and set max-height: Ypx;
  3. Start adding word by word the text you grabbed from the container
  4. Check if the scrollerHeight is less or equal than Ypx
  5. Keep adding words till (4) becomes invalid, then remove the last word you added.

As I said, not very cheap, but I've made some tests and the time it takes to get it done is linear, so with few words it will be pretty fast (when you make the check over 10.000 times it takes little less than a sec)

Hope it helps!

Upvotes: 1

Jared
Jared

Reputation: 12524

I would use a jquery text expander. There are several out there but here is an example: http://plugins.learningjquery.com/expander/ The slice point is based off of a character count but with some trial and error you should be able to find a character count that gives you two lines.

Upvotes: 1

Demian Brecht
Demian Brecht

Reputation: 21368

There's no nice way of doing this for a couple reasons. First, different browsers/platforms may render fonts differently (however slight the difference). Second, there's no way from javascript to extract individual character size of a given font (AFAIK).

If I was implementing something like this, I would simply have a constant for longest allowed length and substring it. I'd also do this server-side as there's no point in sending data to a client that you're not going to use.

Another method (although not one I'd use) would be to put your text in a div with a set width and height, clipping any overflow with overflow: hidden. Of course, this can potentially leave you with partially cut off words, so I would advise against it.

Upvotes: 5

Kraz
Kraz

Reputation: 7090

If your height is too high, you could simply put a 'p' with a white background over the third line and add the "Read More..." in it. And add an height and "overflow:hidden" to your 'p'.

Upvotes: 1

Thomas Shields
Thomas Shields

Reputation: 8942

I'd say use a few different generic text chunks and see how many characters are required to get to two lines. Average the result and round down so you never go over by accident. Then with your real text you round to that guesstimated number and your text should fill up around 2 lines.

Upvotes: 0

Related Questions