How to add an href link instead of replacing some last letters in a paragraph

I have a problem I’d like to get help with.
Here’s my HTML:

<div class="post--content">Lorem ipsum dolor sit amet,nconsectetur adipiscing.Lorem 
 vipsumdolor sit amet,nconsectetur adipiscing.Lorem ipsum dolor sit amet,nconsectetur  
 adipiscing.Lorem ipsum dolor sit amet,nconsectetur adipiscing.Lorem ipsum dolor sit  
 amet,nconsectetur adipiscing.</p>

<a href="link" target="_blank">Read more</a>

My CSS:

.post--content {
    max-width: 300px;  
    line-height: 11.6px;  
    display: -webkit-box;  
    -webkit-line-clamp: 2;  
    -webkit-box-orient: vertical;  
    overflow: hidden;  
}

I want to hide my text if its size exceeds two lines of my width. Then dynamically set my href link at the end of this second line. This href link will bring the user to the entire article. The goal of this is independently of text’s size always will put my href link in this paragraph.
https://codepen.io/DaroGawlik/pen/jOdgrbo?editors=1111