CODEWITHSUNDEEP
phpjavascriptjquerytexttruncate
Argiropoulos Stavros
Argiropoulos Stavros

Reputation: 9533

Howto truncate text in a div

I want to truncate the text of my post.
I used some jquery plugins to accomplish that but the problem is
that first the whole text loads on the client and then the javascript
executes the code to truncate the text and in result there is an ugly
effect where you can see the whole text for millisecons depending
on your connection before it get's truncated.

Should i truncate also in the server?
I'm using codeigniter with wordpress and i thought of using
the_excerpt or something but it is not elegant.

Any ideas?

Upvotes: 1

Views: 4996

Answers (6)

Javier Tellez
Javier Tellez

Reputation: 1

Alright so this is what I put together and it seems to be working:

function truncate_html($s, $l, $e = '…', $isHTML = true) {
$s = trim($s);
$e = (strlen(strip_tags($s)) > $l) ? $e : '';
$i = 0;
$tags = array();

if($isHTML) {
    preg_match_all('/<[^>]+>([^<]*)/', $s, $m, PREG_OFFSET_CAPTURE | PREG_SET_ORDER);
    foreach($m as $o) {
        if($o[0][1] - $i >= $l) {
            break;                  
        }
        $t = substr(strtok($o[0][0], " \t\n\r\0\x0B>"), 1);
        if($t[0] != '/') {
            $tags[] = $t;                   
        }
        elseif(end($tags) == substr($t, 1)) {
            array_pop($tags);                   
        }
        $i += $o[1][1] - $o[0][1];
    }
}
$output = substr($s, 0, $l = min(strlen($s), $l + $i)) . (count($tags = array_reverse($tags)) ? '</' . implode('></', $tags) . '>' : '') . $e;
return $output;

}

truncate_html('<p>I really like the <a href="http://google.com">Google</a> search engine.</p>', 24);

Upvotes: 0

cdcdcd
cdcdcd

Reputation: 1722

It could be possible to use this jQuery plugin if you need the more link: Bodacity

This will allow you to have a "Read More" link if you so need it.

On the downside, if it is a big chunk of text the browser will still load it.

Upvotes: 0

user527892
user527892

Reputation:

substr_replace will accomplish this for you

http://php.net/manual/en/function.substr-replace.php

-- edit due to new info --

Ok, I think this is what you're after then:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Temp</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $('#clippedmore a').click(function(){
          $('#clipped').css('height','auto');
          $('#clippedmore').hide();
        });
      });
    </script>
    <style style="text/css">
      #clipped { height: 80px; overflow: hidden; }
    </style>
  </head>

  <body>
    <div id="clipped">
      <p>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 commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>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 commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>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 commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div id="clippedmore">
      <p><a href="javascript:;">Show more...</a></p>
    </div>
  </body>

</html>

Upvotes: 3

Robert Johnstone
Robert Johnstone

Reputation: 5371

Try the following in php on the server side:

$test = 'something';
if(strlen($test)>12) {
    echo substr($test,0,12)."...";
} else {
    echo $test;
}

Upvotes: 0

toddles2000
toddles2000

Reputation: 1132

If you are truncating the text because you want a set height for UI purpose only, a simple solution would be to wrap your content in a div, set the height and use overflow:hidden to hide the rest. This has the advantage in that you can expand the content using css selectors also.

html page
<div class="mywrapper">your content goes here..</div>

css file
.mywrapper {
 overflow: hidden;
 width: 540px;
 height: 300px;
}

Upvotes: 9

Paulo Santos
Paulo Santos

Reputation: 11567

Truncating text should always be done on the server. Specially if they are large portions of text.

Upvotes: 4

Related Questions