实施显示更多 - 显示较少文本

我有一个面向内容的产品。有一次，我展示了一个可用实体列表及其完整摘要。现在，所说的摘要是用户使用TinyMCE编辑器输入的数据（即它可以包含像img，p，span，ul，li等HTML标签）。由于摘要可以跨越几百行，因此我希望干净地实现Show More-Less功能，使用javascript在默认情况下加载隐藏的摘要，仅在用户单击“显示更多”时才显示其余。实施显示更多 - 显示较少文本

这将是很高兴知道，你们如何拥有或将实施它。我想限制用户输入的标记的多样性，并使用正则表达式将标记用span链接拆分为load-more（就像Facebook一样）。

注意：我不能根据字符/单词的数量拆分文本，因为它可能会违反标记。我无法通过限制高度来隐藏内容，因为img标签（稍后加载并且可以改变包含div的高度，并且反过来破坏您的高度计算。）

来源

2011-06-21 simplyharsh

我会用下面的函数去掉不需要的html标签。

// Strips HTML and PHP tags from a string 
// returns 1: 'Kevin <b>van</b> <i>Zonneveld</i>' 
// example 2: strip_tags('<p>Kevin <img src="someimage.png" onmouseover="someFunction()">van <i>Zonneveld</i></p>', '<p>'); 
// returns 2: '<p>Kevin van Zonneveld</p>' 
// example 3: strip_tags("<a href='http://kevin.vanzonneveld.net'>Kevin van Zonneveld</a>", "<a>"); 
// returns 3: '<a href='http://kevin.vanzonneveld.net'>Kevin van Zonneveld</a>' 
// example 4: strip_tags('1 < 5 5 > 1'); 
// returns 4: '1 < 5 5 > 1' 
function strip_tags (str, allowed_tags) 
{ 

    var key = '', allowed = false; 
    var matches = []; var allowed_array = []; 
    var allowed_tag = ''; 
    var i = 0; 
    var k = ''; 
    var html = ''; 
    var replacer = function (search, replace, str) { 
     return str.split(search).join(replace); 
    }; 
    // Build allowes tags associative array 
    if (allowed_tags) { 
     allowed_array = allowed_tags.match(/([a-zA-Z0-9]+)/gi); 
    } 
    str += ''; 

    // Match tags 
    matches = str.match(/(<\/?[\S][^>]*>)/gi); 
    // Go through all HTML tags 
    for (key in matches) { 
     if (isNaN(key)) { 
       // IE7 Hack 
      continue; 
     } 

     // Save HTML tag 
     html = matches[key].toString(); 
     // Is tag not in allowed list? Remove from str! 
     allowed = false; 

     // Go through all allowed tags 
     for (k in allowed_array) {   // Init 
      allowed_tag = allowed_array[k]; 
      i = -1; 

      if (i != 0) { i = html.toLowerCase().indexOf('<'+allowed_tag+'>');} 
      if (i != 0) { i = html.toLowerCase().indexOf('<'+allowed_tag+' ');} 
      if (i != 0) { i = html.toLowerCase().indexOf('</'+allowed_tag) ;} 

      // Determine 
      if (i == 0) {    allowed = true; 
       break; 
      } 
     } 
     if (!allowed) { 
      str = replacer(html, "", str); // Custom replace. No regexing 
     } 
    } 
    return str; 
}

如果content是编辑器内容，则用法。这将保持斯潘斯：

var my_clean_content = strip_tags(content, 'span');

来源

2011-06-21 15:07:37 Thariama

个人而言，我会这样做jQuery并使用一个插件，如Text Constrain。

您可以download it here或查看jQuery site上的其他类似插件。

来源

2011-06-21 11:31:42 Town

http://henrik.nyh.se/2008/02/jquery-html-truncate这个家伙非常整洁的实施。你也可以在这里看到工作演示http://henrik.nyh.se/examples/truncator/

来源

2011-06-21 13:48:12 meson10

我见过的最好的jQuery插件实现此功能是Expander。它的优点是已经存在好几年了，并且在写这篇文章的时候仍然保持着积极的维护状态，这与解决这个问题的答案中的大多数或所有其他解决方案不同。

来源

2012-06-27 16:58:37 Marcus

实施显示更多 - 显示较少文本

回答

相关问题