How to make a multiline overflow text ellipsis with a read more link at the end?

Question

I have this container and I want it to be rendered like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla ac neque sed velit aliquet molestie. Duis ut
magna euismod, convallis tellus... Read More.

I've tried this. It worked for the text but regarding the link, it's just displaying on another line obviously. Also the link should be kind of a part of the text but if I add the anchor element inside the paragraph element it'll hide it since now it's part of the text.

.text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="container">
  <p class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac neque sed velit aliquet molestie. Duis ut magna euismod, convallis tellus non, molestie risus. Aenean lacinia nisl eget tincidunt bibendum.
  </p>
  <a href="#" class="read-more">Read More</a>
</div>

You can move the link inside the paragraph and wrap the text into a span tag moving here the "text" class. However, you will always see the read more on the following line since you are cutting by line. — Santiago Casas Rey, Mar 16 '23 at 13:23
There's a similar question here but only one liner https://stackoverflow.com/questions/40351604/css-multi-line-text-ellipsis-with-room-for-read-more-link. I don't think what you want is possible without using js. — Batu.Khan, Mar 16 '23 at 13:27
if adding js can solve the problem sure. Also i have seen lots of one liner solutions but that's not what i need. — charbel sfeir, Mar 16 '23 at 14:53

How to make a multiline overflow text ellipsis with a read more link at the end?

0 Answers0