Read more text at the end of multi line truncated-ellipsis text

Question

I don't need to expand/collapse the text, read more will be a hyperlink. I only need static visual properties.

In code snippet below (optimally, look at it in full page), in the first paragraph, it is how it looks like when there is overflow.

On second paragraph, there is no overflow and it looks fine.

On third paragraph, it is how I want it to look like when there is overflow. I want only the card_def to truncate, and read more text to be at the end of third line.

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

.card_def {
    font-size: 16px;
    display: inline;
    overflow: hidden;
}

.card_readmore {
    font-size: 16px;
    display: inline;
    color: #0057b3;
}

<div>This is how it looks when there is an overflow, I don't want this:</div>
<div class="card_short">
  <h3 class="card_def">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h3>
  <h3 class="card_readmore">Read more</h3>
</div>
<br><br>

<div>When there isn't overflow, this paragraph is fine:</div>
<div class="card_short">
  <h3 class="card_def">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum... There is no overflow here.</h3>
  <h3 class="card_readmore">Read more</h3>
</div>
<br><br>

<div>I want the first paragraph to look like this:</div>
<div class="card_short">
  <h3 class="card_def">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type s...</h3>
  <h3 class="card_readmore">Read more</h3>
</div>

Answer 1

Target the first .card_short and give this element a max-height: 100%;.

.card {
  position: relative;
  max-width: 603px;
}

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

.card_def {
  font-size: 16px;
  display: inline;
  overflow: hidden;
}

.card_readmore {
  font-size: 16px;
  display: inline;
  color: #0057b3;
  position: absolute;
  right: 12px;
  bottom: -16px;
  background-color: white;
}

.d-none {
  display: none;
}

<div class="card">
  <div>This is how it looks when there is an overflow, I don't want this:</div>
  <div class="card_short">
    <h3 class="card_def">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h3>
    <h3 class="card_readmore" style="bottom: 32px;">...Read more</h3>
  </div>
  <br><br>
</div>


<div class="card">
  <div>When there isn't overflow, this paragraph is fine:</div>
  <div class="card_short">
    <h3 class="card_def">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum... There is no overflow here.</h3>
    <h3 class="card_readmore d-none">...Read more</h3>
    <!-- no overflow content, no read more -->
  </div>
  <br><br>
</div>

<div class="card">

  <div>I want the first paragraph to look like this:</div>
  <div class="card_short">
    <h3 class="card_def">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type s</h3>
    <h3 class="card_readmore">...Read more</h3>
  </div>
</div>