Okay, I've been spending all day trying to figure out the right approach for this, but have come out short, so maybe someone here can point me in the right direction.

Problem: I have a div with class "article-content". There will be around 2-10 of these on the page. Each of them will contain output from a wysiwyg. i.e. texts wrapped in p-tags, some strong tags, em tags and even img tags.

I need to create a preview/excerpt version of these that wont show the images and will append a ... to the end of x characters + a "read more" link. When this is clicked the full article will be shown including images.

Ive seen the following appraches:

Strip the content of the div after x characters and add ... + link. This makes the content a bit fragile since it can strip end tags, and even strip the middle of an image tag resulting in broken html being outputtet.