在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>
答案 0 :(得分:5)
你走了:
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();
}
});