如何顯示文本的前50個字符

Question

如何通過使用，html，css，javascript，jquery顯示前50個字符的文本。而經過50個charecters創建鏈接，顯示的總文本

Answer 1

demo in fiddle

試試這個：
在HTML

<div class='str'> 
How To Display 1st 50 characters Of Text by using , html, css, javascript, jquery . and after 50 charecters create link for show the total text 
</div> 

在JS

var string = $('.str').text(); 
var str50 = string.substr(0,50) 
$('.str').html(str50+'...'+'<a class="readmore" href="#">readmore</a>'); 
$('.str').attr('data-text',string); 

$('.readmore').click(function(e) 
{ 
    e.preventDefault(); 
    $(this).parent().html($(this).parent().attr('data-text')) 

}) 

如果你想使用更多

對象使用$.each

Answer 2

縮短插件jQuery的可用

Reference Link

Answer 3

下面的代碼可以幫助你..

HTML

<div id="showText"></div> 

JAVASCRIPT

$(document).ready(function(){ 

    var text = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum." 
    $('#showText').html(text.substring(0,50)+"<a id='showDetails' href='javascript:void(0);'>Show Details</a>"); 
    $('#showDetails').on('click',function(){ 
    $('#showText').html(text); 
    }); 
}); 

或者你可以檢查JSFIDDLE鏈接