用jQuery限制文本

问题描述

我正试图将列表视图中的描述文本限制为一定数量的字符，并可以在单击时将其其余部分切换为向下.限制文本不是问题，它可与以下代码段配合使用 http://jsfiddle.net/lgtsfiddler/G42dR/5/

I'm trying to limit my descriptions texts in a list view to an amount number of charachters with the option to toggle down the rest of it on click. Limiting the text is not a problem it works with the following code snippet http://jsfiddle.net/lgtsfiddler/G42dR/5/

$("p").each(function(i) {
    len = $(this).text().length;
    if (len > 150) {
        $(this).text($(this).html().substr(0, 150));
    }
});

如何向其中添加下拉事件?

How could add the dropdown event to it?

推荐答案

一种方法是将预览"部分和文本的其余部分包装在单独的跨度中.然后，您可以添加一个链接，以切换是隐藏还是显示包含文本其余部分的跨度:

One way of doing this would be to wrap the "preview" portion and the remaining portion of your text in separate spans. Then, you could add a link that toggles whether the span containing the remaining portion of the text is hidden or displayed:

$(this).html("<span>" + $(this).text().substr(0,150) + "</span><span style='display:none'>" + $(this).text().substr(150) + "</span>");

var link = $("<a href='#' class='more'>More..</a>");
$(this).append(link);
$(link).click(function(){
    $(this).prev().toggle();
    $(this).html($(this).html()=="More.."?"Less":"More..");
});

演示: http://jsfiddle.net/G42dR/9/

这篇关于用jQuery限制文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！