Show read more link if the text exceeds a certain length

well I am new here and I don’t know much about JavaScript. I saw similar post like this here: How do I add a read more link at the end of a paragraph? but I need some other things which is not available there. I add contents in my gaming site using these BB codes: [url=url to main page of game]Game Name[img]image link[/img][/url] [small]Long description about game[/small]

and my requirements are: 1. Show read more link if the Description exceeds a certain length. 2. I want the Description to be appended with the …(3 dots) and the read more link. 3. I need same url(url to main page of game) in read more link which I entered in above bbcode.

well it will be tough for anyone to understand my requirements/question. also my english is not so good. you can see this page to understand more about my site. http://only4gamers.wapka.me/site_25.xhtml I have already a js code where I got all requirements but not 3rd requirement. can anyone tell me how I can do this ?

Answer

If you are doing it in jquery way.

$('.comments p').text(function(_, txt) {
  if(txt.length > 36){
    txt = txt.substr(0, 36) + "...";
    $(this).parent().append("<a href='#'>Read More</a>");
  }
  $(this).html(txt)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="comments">
  <h3>Heading</h3>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>

<div class="comments">
  <h3>Heading</h3>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>

Advertisement

Answer