How do I limit content preview and keep it readable

Question

I'm loading some feeds and displaying them as links on my site page. When you hover over the link, a tooltip pops up with the feed, time, author, title and content. Sometimes the content is quite long and contains HTML. So I added a preview which cuts off the content after a certain point.

So my question is how do I determine a good break point in the preview content? Right now, my content has an image tag which gets cut off in the middle of the URL (my javascript only counts out to 1000 characters at this time) and I get a broken image in the tooltip... I'm not as worried about breaking tables, but I'd like my preview to not break color formatting or images.

screenshot of the problem:

Code:

content = content.substring(0,1000) +  "...<br><br><span style="float:right;">(Click for more info)</span>";

*Note: the HTML in the feed sometimes has < or > because there is sample HTML code, as well as tags that format the text...

Answer 1

Why not just extract the text from the content using jQuery and show that in your tooltip rather than show the HTML?

content = $('*',content).text().substring(0,1000) + "...<br><br>...