javascript - 在一定数量的字符后附加 'Read More' 链接并隐藏其余字符

Question

在 jQuery 中，如何在大约 162 个字符后附加“阅读更多”链接，隐藏其余部分，一旦单击“阅读更多”链接，显示它，单击它...隐藏它。

我查看了其他问题，但答案是另一个 div，其中包含其余的文本。我真的不想这么做。

我正在尝试一段文字，仅此而已。

<p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna                                enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                        </p>

Answer 1

给你:

http://jsfiddle.net/AlienWebguy/9t3Z5/3/

HTML:

<div id="my_text" class="ellipsis">Lorem ipsum dolor sit amet ........ </div>

CSS:

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('http://seancannon.com/_test/ellipsis.xml#ellipsis');
}

#my_text {
    font-family:arial;
    color:#333;
    font-size:10px;
    width:80%;
}


#read_more {
    border:1px solid #000;
    background-color:#CCC;
    cursor:pointer;
    width:100px;
    text-align:center;
}

JQuery:

$('#read_more').click(function(){
    $('#my_text').toggleClass('ellipsis');
});

// Don't show Read More button if fewer than 500 chars
$(function(){
    if($('#my_text').html().length < 500)
    {
        $('#read_more').hide();
    }
});