I have the following mark-up:
<h5>
<a href=javascript:void(0);>I am a very long title and I need to be shortened</a>
</h5>How can I make it so that if the h5 text is above a certain number of characters, I get rid of the other characters and replace them with a ...?
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>
