Line Clamp with Link at the end of 4th line

Question

The ask to show the 'Read more' link at the end of the fourth line(image below).

If I use the line-clamp it looks like below:

I tried using different approaches, but there is an issue that word does not break properly.

Below is the code:

 .container { width: 800px; position: relative; } .text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .read-more { position: absolute; bottom: 0; right: 0; background: white; } .read-more::before { content: '...'; display: inline; margin: 0 5px; }

 <div class="container"> <div class="text">This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is for testing. This is the issue with this approach</div> <div class="read-more"> <a href="">Read More ></a> </div> </div>

If you could you help in solving the issue, that would be really helpful. And whether this is achievable or not using CSS? Thanks in advance.

Answer 1

Take a look at solution #2 in this article .

Snippet:

/**Major Properties**/
overflow:hidden;
line-height: 2rem;
max-height: 8rem;
-webkit-box-orient: vertical;
display: block;
display: -webkit-box;
overflow: hidden !important;
text-overflow: ellipsis;
-webkit-line-clamp: 4;

The article references a codepen by Shan Shah demonstrating the result: https://codepen.io/ShanShahOfficial/pen/wvBYwaB

You might want to leave out some properties according to your needs (like the line-height ).