Question

90

Show read more link if the text exceeds a certain length

rated 0 times [ 91] [ 1] / answers: 1 / hits: 5399 / 7 Years ago, sat, april 22, 2017, 12:00:00

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:
Game Name image link
[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 ?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jillcalistay

Add To Favorites

Follow

Total Points: 561

Total Questions: 94

Total Answers: 114

Location: Austria

Member since Thu, Jan 7, 2021

3 Years ago

answered 7 Years ago lizet · Accepted 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>