This should work. You have to display the inline element as a block.

Edit: Just realized you want to add dots if the H5 exceeds a number of characters, not if it exceeds a width. I think to do that you will need to use JS - check out the other answer for that.

h5 {
  display: block;
  white-space: nowrap;
  width: 12em;
  overflow: hidden;
  text-overflow: ellipsis;
  color: red; /* This needs to match the color of the anchor tag */
}


a:link {
  color: red;
}

<h5>
  <a href="javascript:void(0);">I am a very long title and I need to be shortened</a>
</h5>

You can do this:

var name = $('a').text();
if (name.length > 20) {
    var shortname = name.substring(0, 20) + " ...";
    $('a').replaceWith(shortname);
}

If you want to use javascript, you can extend String object by prototyping:

String.prototype.limit = function(length) {
    return this.length > length ? (this.substring(0, length) + '...') : this;
}

var str = 'qwertyuiop';
console.log(str.limit(5)); // qwert...