4

I wonder if there is a CSS-only solution to have a paragraph that ends with ellipsis but also let add a "read more" link at the very end on the same line of text.

eg.

regular ellipsis

Ultrices natoque mus mattis, aliquam, cras in pellentesque tincidunt elit purus lectus, vel ut aliquet, elementum...

"read more"

Ultrices natoque mus mattis, aliquam, cras in pellentesque tincidunt elit purus lectus, vel ut aliqu... Read More >

Francesco
  • 23,000
  • 25
  • 96
  • 139

1 Answers1

2

Here's one attempt. It sorta works, although you might have to adjust the styling on the <a> to cater for font changes and such

.truncate {
  display: inline-block;
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.truncate + a {
display: inline-block;
  vertical-align: top;
  margin-top: -1px;
}
<div id="container">
  <p><span class="truncate">This is a text that should be truncated because it's too long</span><a href="#">Read more</a></p>
  </div>
junkfoodjunkie
  • 3,033
  • 1
  • 15
  • 31
  • 4
    The problem with this approach is that `Read more` always needs to be included. If you have some posts with content that is too long, this is fine. But if you also have some posts with no content or content that is less than the width where truncation is necessary, then "Read more" would appear, which isn't desired. – Ryan Mar 01 '20 at 15:36