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元素，该元素的样式为display：none。您也可以将数据属性添加到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);
});

Demo

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元素设置为子元素。

是否可以对字符串进行子串，但保持整个字符串隐藏？

6 个答案: