Question

我有一个面向内容的产品。有一次，我会显示可用实体列表及其完整摘要。现在，所述摘要是用户使用TinyMCE编辑器输入的数据（即它可以包含HTML标签，如img，p，span，ul，li等）。总结可以跨越几百行，我想干净地实现显示更多功能，使用javascript我默认加载部分隐藏的摘要，并仅在用户点击时显示休息，'显示更多”。

很高兴知道你们是如何拥有或将要实现它的。我想限制用户输入的标记种类，并使用正则表达式将标记拆分为span-link to load-more（就像facebook那样）。

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

Answer 1

http://henrik.nyh.se/2008/02/jquery-html-truncate这个家伙非常巧妙的实施。您还可以在此处查看工作演示http://henrik.nyh.se/examples/truncator/

Answer 2

就个人而言，我会使用jQuery执行此操作，并使用Text Constrain等插件。

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

Answer 3

我会使用以下函数来删除不需要的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;
}

如果内容是编辑器内容，则使用。这将保留Spans：

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

Answer 4

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

实现显示更多 - 在页面上显示更少的文本

4 个答案: