Webkit Line Clamp truncates link in the middle

Question

I have a link

<div class="module line-clamp">
   <a href='some url' target="_self">some really long text</a>
</div>

and this CSS

.module {
  width: 250px;
  overflow: hidden;
}
.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
}

I wanted to truncate this after 3 lines of text and put an ellipsis at the end like this

some
really
long ...

What actually happens is

some
really ...
text

If I change my html to be

<div class="module line-clamp">
   <p>some really long text</p>
</div>

then I do get

some
really
long ...

What am I missing?

Here's a JSFiddle.

Answer 1

Hopefully, this helps someone in the future with a similar problem.

There was a simple solution to this simple problem. I put a p tag around the text of the anchor

<div class="module line-clamp">
   <a href='some url' target="_self"><p>some really long text</p></a>
</div>

Answer 2

After reading Sachin's answer I tried adding an empty :after pseudo element and it also did the trick:

.line-clamp a:after { content: ""; }