是否可以对字符串进行子字符串化，但将整个字符串隐藏起来？

Question

我试图将字符串的可见长度减少到大约25个字符。 我想将整个字符串保留在页面上。 当然是隐藏的。

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

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

将返回

This message is 34 charac

我要写的位置该消息是34 charac，但其余字符保持隐藏状态，因此以后可以使用.show（）或其他方式显示它们。

Answer 1

将其存储在jQuery的data()

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

以后你可以做

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

Answer 2

您可以将整个字符串写到具有显示样式的html元素中：没有。 您也可以将数据属性添加到span标签。

Answer 3

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

Answer 4

将字符串添加到数据属性：

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

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

演示

Answer 5

您可以使用CSS属性：选择保存字符串的div，如下所示

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

Answer 6

我会将不需要的部分包裹在一个隐藏的范围内，因此以后可以在其上使用.toggle() 。

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

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

请注意，使用.html()而不是.text()因为第一个允许我将HTML元素设置为子元素。