Question

如何使用，html，css，javascript，jquery显示文本的前50个字符。并且在50个字符之后创建链接以显示总文本

Answer 1

试试这个：
在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

以下代码可以帮助您..

<强> 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链接

Answer 3

缩短插件在jquery中可用

Reference Link

如何显示文本的前50个字符

3 个答案: