Howto truncate text in a div

Question

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?

possible duplicate of [Limiting number of characters displayed in table cell](http://stackoverflow.com/questions/4541412/limiting-number-of-characters-displayed-in-table-cell) — Gordon, Feb 02 '11 at 09:37

score 9 · Answer 1 · answered Feb 02 '11 at 09:32

9

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;
}

answered Feb 02 '11 at 09:32

toddles2000

1,032
1
8
16

+1 Thanks for your answer .The thing here is that i want in the end of the truncated text to insert a "more" link. – Argiropoulos Stavros Feb 03 '11 at 07:36

score 4 · Answer 2 · answered Feb 02 '11 at 09:25

4

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

answered Feb 02 '11 at 09:25

Paulo Santos

11,285
4
39
65

This becomes difficult if you want to limit the displayed size of the text e.g. it needs to fit into a box 540 x 300px because linebreaks and HTML formatting will play a role in how the truncated text is displayed. – Jimbo Dec 08 '12 at 06:59
-1 "always" is a strong work for something that just isn't true. – Alex Dresko Jan 29 '14 at 15:50

score 3 · Answer 3 · 2011-02-03T09:28:51.883

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>

+1 That's nice but the length of the text is not constant meaning that a 100x100 div can take let's say 100-120 characters depending on the word's length inside it.I want to use all the space inside the div if you know what i mean — Argiropoulos Stavros, Feb 02 '11 at 09:33
Ok. The overflow: hidden method shown by toddles2000 will probably be useful then. The problem is that if you may see half a letter where it cuts off unless you use text-align: justify as well. You'll need to be pretty precise with your font sizes and line heights to make sure it doesn't look a bit strange. — , Feb 02 '11 at 09:36
You are right but as i said to toddles i want also a "more" link at the end of the text so it's not that easy. — Argiropoulos Stavros, Feb 03 '11 at 07:39
See my new edit and let me know if this was more the kind of thing you were after. — , Feb 03 '11 at 09:29

score 0 · Answer 4 · answered Nov 26 '13 at 11:40

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

function truncate_html($s, $l, $e = '&hellip;', $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);

score 0 · Answer 5 · answered Feb 02 '11 at 09:34

0

Try the following in php on the server side:

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

answered Feb 02 '11 at 09:34

Robert Johnstone

5,431
12
58
88

score 0 · Accepted Answer · answered Apr 08 '11 at 03:06

0

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.

answered Apr 08 '11 at 03:06

cdcdcd

1,612
13
18

Howto truncate text in a div

6 Answers6