Replace end of HTML text with a few dots

Question

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 "..."?

Check out `text-overflow: ellipsis` – https://developer.mozilla.org/en/docs/Web/CSS/text-overflow — helb, Apr 03 '17 at 13:08
`...` is called an ellipsis. You can apply them based on physical width, E.g. http://stackoverflow.com/questions/26973570/setting-a-max-character-length-in-css — Alex K., Apr 03 '17 at 13:09

blackandorangecat · Accepted Answer · 2017-04-03T13:27:37.510

19

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>

edited Apr 03 '17 at 13:27

answered Apr 03 '17 at 13:19

blackandorangecat

1,246
5
18
37

1

@CRover You can also set width according to characters length, `width: 10ch;` including spaces. – Abhishek Pandey Apr 03 '17 at 13:27
@CRover The reason for the color difference is that the `...` are part of the parent. They are part of the `
` which has a different default color than the child ``. To fix this you will need to add a color to the link (``) that is the same as the parent (`
`). See my most recent edit.
– blackandorangecat Apr 03 '17 at 13:29

score 9 · Answer 2 · answered Apr 03 '17 at 13:11

9

You can do this:

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

answered Apr 03 '17 at 13:11

Prarthana Hegde

361
2
7
18

It will display the original name by default. It will only enter the if bracket, if length > 20. Of course you can change the length or even make it configurable. – Prarthana Hegde Apr 03 '17 at 13:17
2

Why `js` when you can do it by `css` only ? – Abhishek Pandey Apr 03 '17 at 13:29
I have one-upped the CSS answer. It's a great solution! :) – Prarthana Hegde Apr 03 '17 at 19:19

score 1 · Answer 3 · answered May 20 '19 at 10:35

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...

score 0 · Answer 4 · answered Apr 03 '17 at 13:26

<h5 id="expansion">
  <a id="myLink" href="javascript:void(0);">I am a very long title and I need to be shortened And Also I am a very long title and I need to be shortened</a>
</h5>
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>

if($('#myLink').text().length > 20){
    var linkText = $('#myLink').text();
    $('#myLink').html(linkText.substring(0,20)+"...")
    $('#myLink').on("click",function(){
        console.log("linkText :: ",linkText);
        $('#myLink').html(linkText);
    });
}
</script>

You Also try out this. In Click of Link whole Text will be displayed — Kinjal Akhani, Apr 03 '17 at 13:27

G.Ashok Kumar · Answer 5 · 2017-04-03T13:22:55.407

-2

This one is working

        <h5>
          <a class ="one" href="javascript:void(0);">I am a very long title and I need to be shortened</a>
        </h5>
        <style>
    .one
    {
      white-space: nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
      display:inline-block;
      width : 100px;
    }
</style>

set the width according to your website design

edited Apr 03 '17 at 13:22

answered Apr 03 '17 at 13:09

G.Ashok Kumar

1,649
2
13
25

At least check you answer whether it's working or not before posting. – Abhishek Pandey Apr 03 '17 at 13:13

Replace end of HTML text with a few dots

5 Answers5

` which has a different default color than the child ``. To fix this you will need to add a color to the link (``) that is the same as the parent (``). See my most recent edit.

`). See my most recent edit.

` which has a different default color than the child ``. To fix this you will need to add a color to the link (``) that is the same as the parent (`
`). See my most recent edit.