How do I control the number of lines displayed on a block of HTML-formatted user input?

Question

I have a Rails app that lets users input some HTML-formatted text (P, OL, UL, BLOCKQUOTE). I now want to display a short summary of this text, but want to ensure that I'm only showing <= 4 "lines". I can try to shorten the text by the number of words displayed, but that might still end up in lots of lines if there are one-word LI elements, etc. How can I do this?

Answer 1

How about:

<input maxlength="value" />

http://www.w3schools.com/tags/att_input_maxlength.asp

Answer 2

Are your lines determined by where the <br> or \n are? If so count them an only show the text.substring(0, to the location-1 where the 4th break/newline is). If your liines are determined by the length (for example you can only show 20 characters in for each line) then add that restriction to your count. If so I can show you how I would do it.

Answer 3

You could use style="max-height: 40"

But this will only work, if you know about the line height of your lines.

I don't think there is a notation, where you can provide the maximum lines.

Answer 4

I think the short answer is that you can't do it perfect, especially not on the server side. One strategy would be to just guesstimate using something like what @Kyra suggested.

The other thing to do would be to send the full text to the user's browser, then append it into a div of the appropriate width, with the font-size (which could be modified by the users's personal CSS) they will actually have, and then measure the height of the resulting div.

So your div might look something like this:

<div id="dummyDiv" style="position:absolute;top:-10000px;width:400px;font-size:smaller">
user text here
</div>

Then you measure the height using javascript (i.e. jQuery), and if the text is too long, keep trying this on shorter snippets of the text until it's a reasonable height.

EDIT: credit for this strategy goes to flot

Answer 5

If I understand you correctly you want to show a sort of HTML preview of text that users type into a textarea, like the preview that shows below the textarea here on stackoverflow.

Probably the simplest way is with CSS.

#preview { height: 4em; overflow: hidden; }

That should work if the line-height is normal. That is of course just hiding the extra text. If hiding isn't acceptable and you must only generate 4 lines from Ruby to display then it is trickier. I don't know Ruby so I can't give you code examples. I would first off split the text at any point where a new line would be forced, like <br>, <p>, <li> etc. Then split those chunks further by figuring out how many characters can fit on one line and splitting the text at those intervals. Sorry I don't know the Ruby code but you should be able to split the text first on those line breaking characters and then split it further every X characters where X is the approximate amount of characters you can fit on a line. If you use a fixed width font you could figure out exactly how many characters fit on a line. So you would end up with an array or something and then you just glue the first 4 pieces together.

I hope that helps.

Answer 6

<p><%= truncate strip_tags(object.text), :length => 150, :omission => '…' %></p>

Trying to truncate within markup is asking for a broken layout. I'd strip it out and truncate the text. If you need markup I'd use markdown or textile to handle the formatting and then the length based truncation would be more accurately sized.