在一定数量的字符后附加“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();
    }
});