1

enter image description here

I am trying to make a read more button like the picture above from YouTube. I don't need the collapsing functionality though, I only need visual properties.

<div class="card_short">
   <h3 class="card_def">Here is long text.</h3>
   <h3 class="read_more" style="color: #0057b3">Tap to read more.</h3>
</div>

I have a div as above. If these two texts combined exceeds 3 lines, I want the read_more text to be at the end of last line and card_def to either end with "..." before it or go under it. Here is the CSS code I tried but failed:

.article_short {
    max-height: 65px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

When I search for such thing, all results were about expanding-collapsing. I don't need it. I only need visuals, as read_more will be a link. I tried to understand YouTube's codes but it was too complicated for me.

On the other results stated to be related, it was only giving the ellipsis property of only one element. Unlike them, I need the read more button to be floating at the end of the 4th line.

zibidigonzales
  • 338
  • 3
  • 9
  • It doesn't matter what the link does (show/hide or navigate). The CSS challenge is the same. – isherwood Aug 08 '22 at 13:30
  • Be aware that the image above shows something different than what you're asking, though. It's basically a box with a black background gradient overlaying the text. The text itself isn't actually truncated except by the overall height of the box. You'll have to decide what strategy you want. – isherwood Aug 08 '22 at 13:33
  • So in case those questions don't help, you need to choose a strategy and ask something more specific. Put your code in a demo snippet using the editor so we can see it. Right now your markup and CSS don't relate. – isherwood Aug 08 '22 at 13:35
  • Yes I am aware. I only gave it as a visual example. The links you have sent doesn't answer my question, sorry. I want the read more button to be floating if they exceed 4 lines. In links you have sent, they are either single line or don't have a read more button at all. – zibidigonzales Aug 08 '22 at 13:39
  • CSS doesn't do lines. You need a scripted solution along with the CSS you prefer. Your question is too broad, though. Ask about a specific aspect of your problem. – isherwood Aug 08 '22 at 14:28
  • My question is very clear but giving Youtube as an example might made it complicated. I have asked a new one if you find this one hard to understand – zibidigonzales Aug 09 '22 at 07:45

0 Answers0