link "see more" in the text box, at the overflow - html

Question

I need to cut responsive text on line 4, like this :
I did it like this:
$(".show-more").on('click', function(){
$('.text').css('display', 'block');
$(this).css('display', 'none');
return false;
});
.show-more{
position: absolute;
display: block;
padding:0;
margin: 0;
font-size: 11px;
line-height: 16px;
font-weight: 400;
border: none;
outline: none;
right: 0px;
height: 24px;
width: 93px;
text-align: left;
transform: translateY(-20px);
}
.text{
width: auto;
margin: 0 16px;
font-size: 11px;
line-height: 16px;
font-weight: 400;
margin-top: -33px;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<button class="show-more">... see-more</button>
I need to add a 'see more' link but at the end of the fourth line.
Currently, I added a button with the text and then placed it in absolute above the text.
I am looking for a 'cleaner' method because the text can be cut in the middle of a letter.

Answer 1

You can achieve this using only a link <a> element in your paragraph:
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
... see-more
</p>