Is it possible to substring a string, but keep the whole string hidden?

Question

I am trying to cut down the visible length of a string to about 25 characters. I want to keep the whole string on the page. Hidden of course.

<span>This message is 34 characters long</span>

$("span").text(function(index, text) {
    return text.substr(0, 25);
});

Will return

This message is 34 charac

Where I want it to write This message is 34 charac but keep the rest of the characters hidden, so I can display them later using .show() or something else.

Answer 1

Store it in jQuery's data()

$("span").text(function(index, text) {
    $(this).data('txt', text);
    return text.substr(0, 25);
});

Later you can just do

$("span").text(function() {
    return $(this).data('txt');
});

Answer 2

You could write the whole string to a html element of it's own that has a style of display: none. You could also add a data attribute to the span tag as well.

Answer 3

$("span").html(function(index, text) {
    return text.substr(0,25) + '<span style="display:none">' + text.substr(25) +'</span>';
});

Answer 4

Add the string to a data attribute:

<span data-text="This message is 34 characters long"></span>

$("span").text(function(index, text) {
  return $(this).data('text').substr(0, 25);
});

Demo

Answer 5

You can use a CSS property: Select the div where you save the string like this

  <div>My String</div>
  <style>
  div{
     width: 50px;
     overflow: hidden;/* this will hide all the content that surpass the width */
  }
  </style>

Answer 6

I would wrap the unwanted part in a hidden span, so I could use .toggle() on it after.

$('span').html(function(index, oldHtml) {
        return oldHtml.substring(0,25) + '<span class="toggleHidden">' + text.substr(25) + '</span>';
});

$('.toggleHidden').toggle();

Note the use of .html() instead of .text() as the first one allows me to set HTML elements as children.