• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 884
  • Last Modified:

Javascript truncate string at 25 characters?


I need to truncate a link's text if it's longer than 25 characters, it needs to be a simple javascript solution.
Server side, I've wrapped the link's anchor text in a <span id="truncate"> if it's longer than 25 characters, so the javascript can do the rest.
But what JS can I use for this? I've tried a few things I've found by Googling, but they seem over complex and none worked.

  • 2
1 Solution
Hello i-CONICA,

Use : substr(0, length)


So in your case : var myStr = myStr.substr(0,25);

i-CONICAAuthor Commented:
Hi, Thanks.

I've no idea how to implement this, could you provide an example?

First, you need to change the id="truncate" to class="truncate". Every element with an id must have a unique id, while this is not true for class.
 Second, if you are going to mark these special links by enclosing them in a span tag, you should make sure that the span tag is outside of the link. This just makes the truncation easier to handle.
 Conditional on these two factors, the following sample code should give you an idea. Note that we need to call this truncation function only after the entire page is loaded; hence, the function call is included in the window.onload section.

Finally, I will remark that there are other ways that come to mind of doing this that don't require a span tag generated by the server (i.e. automatically prune all links that are too long). They even don't require much modification to the code. Let us know if that is your preference.

For completeness, I will mention that if you are already using a JavaScript library, part of the code that loops through and looks for all the span tags and the a tag inside them can likely be simplified.

<script type="text/javascript">

function truncLink() {
   var trunc = document.getElementsByTagName("span");
   for (var i = 0; i < trunc.length; i++) {
      if (trunc[i].className.indexOf("truncate") !== -1) {
         // avoid DOM differences between IE and others
         var lnk = trunc[i].getElementsByTagName("a")[0];
         lnk.innerHTML = lnk.innerHTML.substr(0,25);

window.onload = function() {

<a href="http://www.google.com/">Short Link</a>
<span class="truncate"><a href="http://www.yahoo.com/">This is an extremely long link to Yahoo!</a></span>
<span class="truncate"><a href="http://www.google.com/">This long link is to Google. Blah blah blah 


Open in new window

i-CONICAAuthor Commented:
Thank you very much.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now