是否可以对字符串进行子字符串化，但隐藏整个字符串？答案

【问题标题】：Is it possible to substring a string, but keep the whole string hidden?是否可以对字符串进行子字符串化，但隐藏整个字符串？
【发布时间】：2014-01-17 17:37:14
【问题描述】：

我正在尝试将字符串的可见长度减少到大约 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 个字符，但要隐藏其余字符，以便稍后使用 .show() 或其他东西显示它们否则。

【问题讨论】：

您可以为原始文本设置一个属性或属性，并在以后使用该属性恢复它。
或使用 css: white-space:pre;宽度：25em；溢出：隐藏；显示：内联块；
@dandavis Font-size is not letter-width: jsfiddle.net/V2h2F :) 好的，每个字母的一半，你就进去了！ jsfiddle.net/BnSzE ;) 你也可以做 ellipsis 的事情。
@dandavis Stop：不适用于字母jsfiddle.net/XQpLZ。 :(

标签： javascript jquery html string substr

【解决方案1】：

将其存储在 jQuery 的 data()

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

以后你就可以了

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

【讨论】：

@Snorlax - 谢谢！作为我自己的核电站的所有者，我真的不需要饼干，Smithers 为我买了那些，但接受答案肯定会很好吗？
Lmao。在那里大笑。我会接受一次（我相信还有两分钟）。编辑：一分钟！

【解决方案2】：

您可以将整个字符串写入它自己的具有 display: none 样式的 html 元素。您也可以将数据属性添加到 span 标签。

【讨论】：

有同样的想法

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

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

Demo

【讨论】：

【解决方案5】：

您可以使用 CSS 属性：像这样选择保存字符串的div

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

【讨论】：

【解决方案6】：

我会将不需要的部分包裹在一个隐藏的 span 中，以便之后我可以在其上使用 .toggle()。

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

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

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

【讨论】：