Hide Images in Overflow Text within Gather

I'm attempting to build a community within Gather. I would like it so that on the Topic page each post has a 2 line preview of the body text within it. After some research, I was able to get some HTML and CSS to function exactly the way that I wanted it to.

However, this doesn't take into account that posts can use images. Therefore, the image gets pulled through alongside the text if a user has added an image to the first few lines. Ultimately, the page breaks because of this.

How can I make it so that the code ignores any images being pulled from the body text within the overflow? Here is the code i'm using.

<div class="postdetails">
{{details}}
</div>

.postdetails {
  font-weight:200; 
  font-size: 14px;
  overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
           line-clamp: 2; 
   -webkit-box-orient: vertical;
}