特定の文字数の後に「Read More」リンクを追加し、残りを隠す

Question

jQueryで約162文字の後に「Read More」リンクを追加するにはどうすればいいですか？クリックして...隠す

私は他の質問を見ましたが、回答にはテキストの残りの部分がある別の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(); 
    } 
});