Shorten text to add read more link

Question

I have the following HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TestPost</title>
    <script src="jquery-2.1.4.min.js"></script>
    <script src="more.js"></script>
</head>
<body>
   <div class="post1">
   This is post one
    </div>
    <div class="post1">
    Another post number one
    </div>
    <div class="post2">
    And this is post two
    </div>
    <div class="post3">
    Last but not least, post three
    </div>
</body>
</html>

What i'm looking for is the folowing: When the text in a div is longer that, lets say, 5 chars, it should cut it off and add ...read more(including a link to a page).

I tried some PHP and some JQuery, but to be honest, I'm not sure anymore what to use.

If I could get the answer, that would be fantastic, but a push in the right direction would be very appreciated as well :)

Edit: The second post1 was added for testing purposes for anyone who's wondering.

What exactly you tried? In PHP you can use strlen&substr, in JS it's similar. — pavel, Jun 15 '15 at 11:17
Show us what you have tried, both in PHP and JavaScript. In short, is you want to have "read more" button that immediately shows the rest, JavaScript could be the right solution. When it is just showing, and "read more" leads to a different page, I'd go with PHP. — Bart Friederichs, Jun 15 '15 at 11:21
Your HTML is also invalid, you cannot have the same ID twice. — Bart Friederichs, Jun 15 '15 at 11:24
This doesn't answer the question but from a semantic point of view, if you list things, you should be using list tags, either `
` or `
`. That said, to answer your question, I would have a look at [this library](http://dotdotdot.frebsite.nl/) which has the advantage of doing this client-side, therefore providing better UX among different devices (you might want to display more text on a desktop than a mobile device...) — Laurent S., Jun 15 '15 at 11:29
@BartFriederichs ah ofcourse, what a beginner mistake. Shouldn't make those mistakes at this point. Thanks for pointing it out! — JeroenM, Jun 15 '15 at 11:40
Duplicate - http://stackoverflow.com/a/4258963/7118098 You can find your answer in PHP there. — Zach, Jan 30 '17 at 08:20

xcvd · Answer 1 · 2015-06-15T11:29:09.017

2

To do this with PHP, when you ouput your text, run it through a shortening function like this:

function shorten($output, $limit = 5) {
  $output = htmlspecialchars($output, ENT_QUOTES, 'UTF-8');
  if (strlen($output) > $limit) {
    $output = substr($output, 0, $limit) . ' <a href="#">... read more</a>';
  }

  echo $output;
}

You can use it then like this:

<div id="post1">
    <?php shorten('This is post one'); ?>
 </div>

edited Jun 15 '15 at 11:29

answered Jun 15 '15 at 11:22

xcvd

666
1
5
13

1

This could get you in trouble if the post's content had HTML tags. – Bart Friederichs Jun 15 '15 at 11:23
Still not right. You are escaping also the code you injected (the ` – Bart Friederichs Jun 15 '15 at 11:26
Weird, i get this as output: $limit) { $output = substr($output, 0, $limit) . ' ... read more'; } echo $output; } ?> But that might be something i've done wrong? – JeroenM Jun 15 '15 at 11:32
Update your question so I can see how you're using this. – xcvd Jun 15 '15 at 11:38
Nvm, i don't know why it didnt work, but now it does! But is there also a way to select a div id/class in the php to use the code on, instead of having to insert php around the text? – JeroenM Jun 15 '15 at 11:57
Glad everything worked out, and you would want to use the JavaScript solution if that's how you want to handle it. – xcvd Jun 15 '15 at 12:08
Ye, at this moment i'm using the JS version. But i could switch to the php aswell. Not sure yet. The JS worked for me as first (really close though), but i upvoted yours aswell because it works aswell and I would love to be able to accept 2 answers, but i can only accept one. Again, thanks a lot! – JeroenM Jun 15 '15 at 12:29

score 2 · Accepted Answer · edited Sep 14 '17 at 06:47

2

Use attribute class instead of id. replace id='post' with class='post'

Use this code into your more.js

var mess_content = $('.post');
mess_content.each(function(){
   if ($(this).text().length > 120) {
      var obrtext = $(this).text().substr(0,120) ;
      $(this).html(obrtext+"<a href='#'>read more</a>") ;
   }
});

edited Sep 14 '17 at 06:47

Gagantous

432
6
29
69

answered Jun 15 '15 at 11:24

Faradox

183
2
14

Thanks! This worked for me so far, i only had to ad something to the read more that links it to a different page. – JeroenM Jun 15 '15 at 11:38
I tried the same, but the output will be text. Not sure how to change it to a working link :x Because when you remove the " at the sides of the anchor tag, the / at the messes it up. – JeroenM Jun 15 '15 at 11:47
change the last `text()` to the `html()` – Faradox Jun 15 '15 at 11:54

Shorten text to add read more link

2 Answers2