I am a very long title an...">
Clever Geek Handbook

Replace end of HTML text with multiple dots

I have the following allowance:

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


How can I make it so that the text is h5

above a certain number of characters, I got rid of other characters and replaced them with "..."?

+3


source to share


5 answers


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

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



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>
Run codeHide result


+5


source


You can do it:



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


source 


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


source


If you want to use javascript, you can extend the object String

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


source


This one works

        <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 width according to your website design

-2


source






More articles:


All Articles